/* ============================================
   Želement — Design Tokens
   Drop-in CSS custom properties.
   Importovat v :root nebo ekvivalentní rodičovský selector.
   ============================================ */

:root {
  /* —— Brand colors —— */
  --color-red: #d3071a;
  --color-red-dark: #b30617;
  --color-red-tint: #fff0f1;
  --color-ink: #1a1a1a;
  --color-ink-2: #444444;
  --color-muted: #6b6b6b; /* #8a8a86 mělo na papíru jen 3,3:1 — malý šedý text potřebuje 4,5:1 */
  --color-paper: #f6f1e8;
  --color-paper-2: #ececea;
  --color-bg: #fafaf8;
  --color-white: #ffffff;

  /* —— Hairlines —— */
  --color-hairline: #d8d8d4;
  --color-hairline-2: #b8b8b4;

  /* —— Semantic —— */
  --color-success: #2d8c4a;
  --color-success-bg: #e7f5eb;
  --color-warning: #ffd84a;
  --color-warning-bg: #fff8db;
  --color-info: #2a6fdb;
  --color-danger: var(--color-red);

  /* —— Typography —— */
  --font-serif: 'Times New Roman', Times, 'DM Serif Display', serif;
  --font-serif-body: Georgia, 'Times New Roman', serif;
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 38px;
  --text-3xl: 56px;
  --text-4xl: 88px;
  --text-5xl: 120px;

  --leading-tight: 0.9;
  --leading-snug: 1.1;
  --leading-normal: 1.4;
  --leading-relaxed: 1.55;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.2em;

  /* —— Spacing —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* —— Borders —— */
  --border-thin: 1px solid var(--color-hairline);
  --border-medium: 2px solid var(--color-hairline-2);
  --border-bold: 3px solid var(--color-ink);
  --border-shock: 4px solid var(--color-red);

  /* —— Shadows —— */
  --shadow-card: 4px 4px 0 var(--color-hairline);
  --shadow-bold: 6px 6px 0 var(--color-ink);
  --shadow-elev: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* —— Layout —— */
  --layout-public-max: 1280px;
  --layout-admin-max: 1440px;
  --layout-article-max: 720px;
  --layout-sidebar: 220px;

  /* —— Motion —— */
  --ease-fast: 120ms cubic-bezier(0.4, 0, 0.6, 1);
  --ease-base: 220ms cubic-bezier(0.36, 0, 0.66, 1);
  --ease-slow: 400ms cubic-bezier(0.36, 0, 0.66, 1);

  /* —— Z-index —— */
  --z-base: 1;
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-easter: 9000;
}