/*
 * css/01-tokens.css
 * Extrahováno z původního style.css (Etapa 1, 2026-04-27).
 * Pravidla zachována 1:1 — refactor obsahu přijde v Etapě 2 a 3.
 */

/* === Editorial Civic Vitality v2.1 (původně řádky 74–173) === */
:root {
  /* Primární modrá — autorita */
  --primary:                 #006684;
  --primary-dim:             #005570;
  --primary-container:       #66c2e9;
  --primary-fixed-dim:       #77d2f9;
  --on-primary:              #ffffff;
  --on-primary-container:    #001d34;

  /* Sekundární limetková — "spark", max 5 % plochy */
  --secondary:               #506200;
  --secondary-container:     #d2ef6d;
  --secondary-fixed:         #d2ef6d;
  --on-secondary:            #ffffff;
  --on-secondary-container:  #586c00;

  /* Povrchy — vrstvení jako papír */
  --surface:                 #f8f9ff;
  --surface-bright:          #f8f9ff;
  --surface-container-low:   #eef4ff;
  --surface-container:       #e4efff;
  --surface-container-highest:#cfe5ff;
  --surface-container-lowest:#ffffff;

  /* Text */
  --on-surface:              #001d34;
  --on-surface-variant:      #3f484d;
  --outline-variant:         #bec8ce;

  /* Stíny & radius */
  --shadow-ambient:          0 8px 24px rgba(0, 29, 52, 0.06);
  --shadow-card:             0 2px 12px rgba(0, 29, 52, 0.04);
  /* Radius: viz jednotná škála níže (sekce „Zaoblení rohů"). Staré názvy
     jsou tam ponechány jako aliasy na novou škálu kvůli zpětné kompatibilitě. */

  /* Typ */
  --font-body:               system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head:               system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Nový design systém — odpovídá HTML prototypu */
  --navy:                    #1b3d4f;
  --navy-dark:               #102835;
  --navy-mid:                #254e63;
  --canvas:                  #f6f8f5;
  --text-color:              #192d1e;
  --text-mid:                #4a6155;
  --text-light:              #88a090;
  --border-color:            #e2e8e0;
  --border-mid:              #cfd8cc;
  --starostove:              #d4007a;
  --starostove-bg:           #fce8f3;

  /* ═══════════════════════════════════════════════════════════
     ZAOBLENÍ ROHŮ — jednotná škála (sjednoceno 30. 7. 2026).
     Jediný zdroj pravdy. Všechna border-radius míří sem.
     ═══════════════════════════════════════════════════════════ */
  --r-sm:                    12px;   /* vstupy, malé ovládání, drobné insety */
  --r-md:                    18px;   /* tlačítka, toolbar, mapová ovládání */
  --r-lg:                    24px;   /* karty, panely, filtry */
  --r-xl:                    32px;   /* detail podnětu, velké overlaye, hero karty */
  --r-pill:                  999px;  /* pilulky, chips, segmentové přepínače */
  --r-full:                  50%;    /* kruhy — avatary, ikonová tlačítka */

  /* Zpětná kompatibilita — staré názvy tokenů → nová škála (dle hodnoty). */
  --r-xs:                    var(--r-sm);
  --radius-base:             var(--r-md);
  --radius-sm:               var(--r-sm);
  --radius:                  var(--r-sm);
  --radius-md:               var(--r-sm);
  --radius-xl:               var(--r-lg);
  --radius-card:             var(--r-xl);

  /* Zpětná kompatibilita — staré proměnné mapované na nový systém */
  --green:                   #8aba3b;
  --green-dark:              #6d9a28;
  --green-bg:                #f0f7e4;
  --green-light:             #d4ef76;
  --blue:                    #5bbde4;
  --blue-dark:               #3a9ecb;
  --blue-bg:                 #e7f5fc;
  --blue-light:              #b0dcf8;
  --dark:                    var(--navy);
  --body-bg:                 var(--canvas);
  --text:                    var(--text-color);
  --muted:                   var(--text-mid);
  --border:                  var(--border-color);
  --white:                   var(--surface-container-lowest);
  --shadow:                  var(--shadow-card);

  /* ── Designové tokeny: typografie ─────────────────────── */
  --text-xs:      13px;   /* eyebrow, štítky */
  --text-sm:      14px;   /* meta, popisky */
  --text-base:    17px;   /* body */
  --text-lg:      19px;   /* hero perex */
  --text-h3:      1.25rem;
  --text-h2:      clamp(1.6rem, 3vw, 2.2rem);
  --text-h1:      clamp(2.2rem, 5vw, 3.4rem);
  --text-display: clamp(2.6rem, 6vw, 4rem); /* hero homepage */

  --tracking-tight:  -.025em;
  --tracking-eyebrow: .08em;

  /* ── Spacing systém ──────────────────────────────────── */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
}

/* === FÁZE 1 — layout tokens (původně řádky 5597–5602) === */
:root {
  --trb-page-max: 1140px;
  --trb-text-max: 720px;
  --trb-space-section: clamp(88px, 12vw, 156px);
  --trb-space-block: clamp(28px, 4vw, 56px);
}

/* === FÁZE 2 — design system tokens (původně řádky 5876–5894) === */
:root {
  --trb-page-x: clamp(20px, 4vw, 48px);
  --trb-content: 760px;
  --trb-wide: 1120px;

  --trb-section-s: clamp(56px, 8vw, 96px);
  --trb-section-m: clamp(88px, 12vw, 148px);
  --trb-section-l: clamp(120px, 16vw, 196px);

  --trb-h1: clamp(3rem, 8vw, 7.25rem);
  --trb-h2: clamp(2rem, 5vw, 4.5rem);
  --trb-lead: clamp(1.2rem, 2vw, 1.7rem);
  --trb-body: clamp(1.05rem, 1.3vw, 1.25rem);

  --trb-bg: var(--canvas);
  --trb-ink: var(--text-color);
  --trb-muted: color-mix(in srgb, var(--text-color) 62%, transparent);
  --trb-line: color-mix(in srgb, var(--text-color) 12%, transparent);
}