/* ==========================================================================
   Design tokens – Vykupujeme trámy
   Zdroj: design-home.pdf (frame 1440 px, okraje 80 px, 8px grid)
   ========================================================================== */

:root {
  /* ---------- Barvy ---------- */
  --c-ink: #051107;            /* texty, tmavá sekce */
  --c-ink-soft: #1b251c;
  --c-bg: #f7f6f4;             /* pozadí stránky */
  --c-cream: #fbf5e8;          /* béžové karty */
  --c-cream-deep: #f4ead6;
  --c-white: #ffffff;
  --c-gold: #c69350;           /* CTA, akcent */
  --c-gold-hover: #b98543;
  --c-wood: #4a2f14;           /* tmavé staré dřevo – výplň CTA při hoveru */
  --c-gold-soft: #f0d2ac;      /* trasa */
  --c-gold-mid: #dab687;       /* body trasy */
  --c-brown: #673c00;          /* odkazy v kartách */
  --c-muted: #45483f;          /* popisky */
  --c-muted-2: #6b6a66;        /* aktivní text kroku */
  --c-idle: #969b95;           /* neaktivní nadpis kroku */
  --c-idle-2: #bfbfbb;         /* neaktivní text kroku */
  --c-chip: #e4e3df;           /* neaktivní toggle */
  --c-line: rgba(5, 17, 7, 0.1);
  --c-on-dark: #ffffff;
  --c-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* ---------- Písma ---------- */
  --ff-display: "Funnel Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Typografická škála (desktop 1440 → mobil 375) ---------- */
  --fs-h1: clamp(2.5rem, 1.972rem + 2.254vw, 4rem);          /* 40 → 64 */
  --fs-h2: clamp(2rem, 1.648rem + 1.502vw, 3rem);            /* 32 → 48 */
  --fs-display: clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem);  /* 28 → 40  statement, velké karty, brand headline */
  --fs-h3: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);          /* 24 → 32  menší karty, statistiky, čísla kroků */
  --fs-h4: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);       /* 20 → 24  nadpis kroku, malé karty */
  --fs-big-number: clamp(3rem, 2.472rem + 2.254vw, 4.5rem);  /* 48 → 72  „30“ v bento */
  --fs-list: clamp(1.125rem, 0.993rem + 0.563vw, 1.5rem);    /* 18 → 24  položky katalogu */
  --fs-lead: 1.125rem;                                        /* 18 */
  --fs-body: 1rem;                                            /* 16 */

  --lh-tight: 1.05;
  --lh-heading: 1.167;   /* 48/56 */
  --lh-snug: 1.25;
  --lh-body: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- Spacing (8px grid) ---------- */
  --s-1: 0.5rem;   /* 8 */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 2.5rem;   /* 40 */
  --s-6: 3rem;     /* 48 */
  --s-7: 3.5rem;   /* 56 */
  --s-8: 4rem;     /* 64 */
  --s-9: 5rem;     /* 80 */
  --s-10: 6rem;    /* 96 */
  --s-11: 7.5rem;  /* 120 */

  --gutter: clamp(1rem, -0.408rem + 6.009vw, 5rem);   /* okraj stránky 16 → 80 */
  --container: clamp(80rem, calc(20rem + 66.667vw), 100rem); /* 1280 → 1600 obsah */
  --section-gap: clamp(5rem, 4.12rem + 3.756vw, 7.5rem); /* 80 → 120 */
  --inset: clamp(0.5rem, 0.324rem + 0.751vw, 1rem);   /* odsazení hero/tmavé sekce od kraje 8 → 16 */

  /* ---------- Tvary ---------- */
  --r-sm: 0.375rem;  /* 6 */
  --r: 0.5rem;       /* 8 – karty, obrázky, sekce */
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(5, 17, 7, 0.04), 0 8px 24px -8px rgba(5, 17, 7, 0.12);
  --shadow-lift: 0 2px 4px rgba(5, 17, 7, 0.04), 0 24px 48px -16px rgba(5, 17, 7, 0.22);

  /* ---------- Pohyb ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.8s;

  /* ---------- Vrstvy ---------- */
  --z-nav: 50;
  --z-menu: 60;
}