/* =====================================================================
   ÚzkostDeprese.cz — Design Tokens
   Klidná, důvěryhodná, přístupná paleta (WCAG 2.1 AA).
   Vše jako CSS custom properties pro 1:1 přenos do WordPress child theme.
   ===================================================================== */

:root {
  /* ---------- BARVY: podklady ---------- */
  --color-bg:            #f3efe9; /* teplý vzdušný podklad stránky */
  --color-bg-warm:       #ece6db; /* teplejší sekce / oddělení */
  --color-surface:       #fcfaf6; /* karty, panely */
  --color-surface-2:     #f6f2ea; /* jemně odlišený panel */
  --color-line:          #e2dccf; /* jemné linky / okraje */
  --color-line-strong:   #cfc7b6;

  /* ---------- BARVY: text (na světlém podkladu) ---------- */
  --color-ink:           #233330; /* hlavní text — kontrast 11.8:1 na --color-bg */
  --color-ink-soft:      #4c5c58; /* sekundární text — 6.4:1 */
  --color-ink-muted:     #6c7b76; /* meta / popisky — 4.6:1 (AA) */

  /* ---------- BARVY: primární (důvěra + klid, petrolejová) ---------- */
  --color-primary:        #3f6360; /* tlačítka, odkazy — bílý text 5.1:1 (AA) */
  --color-primary-strong: #2d4845; /* hover / aktivní */
  --color-primary-ink:    #2a4d49; /* primární barva jako TEXT na světlém — 6.8:1 */
  --color-primary-tint:   #e3ebe8; /* světlé pozadí bloků */
  --color-primary-tint-2: #d3e0db;

  /* ---------- BARVY: šalvějová (sekundární / dekor) ---------- */
  --color-sage:          #9fb8af;
  --color-sage-tint:     #e8efe9;
  --color-sage-deep:     #6f8e84;

  /* ---------- BARVY: akcent (terakotově růžová — zvýraznění) ---------- */
  --color-accent:        #c98a86; /* dekor, tečky, linky */
  --color-accent-ink:    #a4564f; /* akcent jako TEXT/odkaz na světlém — 4.6:1 (AA) */
  --color-accent-tint:   #f3e4e0; /* jemné pozadí (affiliate, výzkum) */
  --color-accent-strong: #8f4a44; /* hover */

  /* ---------- BARVY: stavové (jemné, nepoplašné) ---------- */
  --color-info:          #3f6360;
  --color-info-tint:     #e3ebe8;
  --color-care:          #a4564f; /* krizová pomoc — vážné, ne poplašné */
  --color-care-tint:     #f6ebe4;

  /* ---------- BARVY: tmavé plochy (footer, hero invert) ---------- */
  --color-dark:          #20302d;
  --color-dark-2:        #2a3d39;
  --color-on-dark:       #eef0e9; /* text na tmavém — 12:1 */
  --color-on-dark-soft:  #b9c4bd;

  /* ---------- TYPOGRAFIE ---------- */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:  "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluidní typografická škála (tělo ≥ 18px). clamp(min, pref, max) */
  --fs-50:  clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem); /* meta drobné */
  --fs-100: clamp(0.94rem, 0.90rem + 0.18vw, 1.00rem); /* popisky */
  --fs-200: clamp(1.125rem, 1.08rem + 0.22vw, 1.22rem); /* TĚLO ≥18px */
  --fs-300: clamp(1.22rem, 1.14rem + 0.40vw, 1.44rem);  /* perex / lead */
  --fs-400: clamp(1.44rem, 1.30rem + 0.70vw, 1.85rem);  /* H3 */
  --fs-500: clamp(1.80rem, 1.55rem + 1.20vw, 2.55rem);  /* H2 */
  --fs-600: clamp(2.30rem, 1.90rem + 2.00vw, 3.50rem);  /* H1 */
  --fs-700: clamp(2.90rem, 2.20rem + 3.20vw, 4.60rem);  /* hero display */

  --lh-tight:   1.12;
  --lh-snug:    1.28;
  --lh-normal:  1.6;
  --lh-relaxed: 1.78; /* komfortní řádkování textu */

  --ls-tight: -0.02em;
  --ls-wide:   0.08em;

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

  /* ---------- SPACING (4px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5.5rem;
  --space-11: 7rem;
  --space-12: 9rem;

  /* ---------- LAYOUT ---------- */
  --maxw-prose:  44rem;   /* komfortní šířka čtení (~70 znaků) */
  --maxw-text:   52rem;
  --maxw-wide:   72rem;
  --maxw-full:   80rem;
  --gutter:      clamp(1.25rem, 4vw, 3rem);

  /* ---------- RADIUS ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  /* ---------- STÍNY (jemné, klidné) ---------- */
  --shadow-xs: 0 1px 2px rgba(35, 51, 48, 0.05);
  --shadow-sm: 0 2px 8px rgba(35, 51, 48, 0.06);
  --shadow-md: 0 8px 24px rgba(35, 51, 48, 0.08);
  --shadow-lg: 0 18px 48px rgba(35, 51, 48, 0.10);
  --ring: 0 0 0 3px rgba(63, 99, 96, 0.35); /* focus */

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;
}