/* styles/default/tokens.css — design tokeny: primitiva, sémantické barvy (light-dark), tóny, typografie, odsazení, rádius, stíny, z-index, pohyb, rozměry
   Created :: 2026-10-21
   Updated :: 2026-10-28
   2026-10-28 :: M9 – úklid a revize (viz 04 kap. 3)
   Jediný soubor s hodnotami barev. Komponenty používají jen sémantické tokeny a --tone-*. */

:root                     { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root {
  /* ---------- Primitiva: neutrální (chladná šedá) – jen pro sémantické tokeny ---------- */
  --n-0: #ffffff;   --n-25: #fbfcfd;  --n-50: #f5f7fa;  --n-100: #eef1f5; --n-150: #e4e8ee;
  --n-200: #d8dee6; --n-300: #c1c9d3; --n-400: #98a2b0; --n-500: #6f7a89; --n-600: #556070;
  --n-700: #3e4756; --n-800: #2a313c; --n-900: #1a1f27; --n-950: #10141a;
  --n-d-surface: #161b22; --n-d-surface-2: #1b212a; --n-d-hover: #212834; --n-d-border: #2a313c;

  /* ---------- Primitiva: brand – plachtová modrá ---------- */
  --b-50: #eef4ff;  --b-100: #dbe7ff; --b-200: #bdd3ff; --b-300: #90b4fd; --b-400: #5f8ff9;
  --b-500: #3a6cf4; --b-600: #2553e0; --b-700: #1e42bd; --b-800: #1d3898; --b-900: #1c3278;

  /* ---------- Sémantické barvy ---------- */
  --color-bg:               light-dark(var(--n-50), var(--n-950));
  --color-surface:          light-dark(var(--n-0), var(--n-d-surface));
  --color-surface-2:        light-dark(var(--n-25), var(--n-d-surface-2));
  --color-surface-hover:    light-dark(var(--n-100), var(--n-d-hover));
  --color-surface-selected: light-dark(var(--b-50), rgb(58 108 244 / .16));
  --color-border:           light-dark(var(--n-150), var(--n-d-border));
  --color-border-strong:    light-dark(var(--n-200), var(--n-700));
  --color-text:             light-dark(var(--n-900), #e8ecf1);
  --color-text-muted:       light-dark(var(--n-600), #a3adba);
  --color-text-subtle:      light-dark(#636e7d, #8a94a3);        /* M8-02: ≥ 4.5:1 i na surface-hover (dřív n-500 / #7d8796 = 3.8–4.4) */
  --color-text-inverse:     light-dark(#ffffff, var(--n-950));
  --color-primary:          light-dark(var(--b-600), var(--b-500));
  --color-primary-hover:    light-dark(var(--b-700), var(--b-600));   /* M9-10, N40: bílý text na b-400 měl 3,1:1, na b-600 má 6,2:1 (b-700 světlý 8,2:1) */
  --color-primary-soft:     light-dark(var(--b-50), rgb(58 108 244 / .16));
  --color-primary-text:     light-dark(var(--b-600), var(--b-300));   /* M8-02: primární modrá jako TEXT (aktivní položky, čipy, badge) – v tmavém režimu má --color-primary na ploše jen 3.3–3.8:1 */
  --color-on-primary:       #ffffff;
  --color-on-danger:        light-dark(#ffffff, var(--n-950));   /* M9-10, N40: bílá na tmavém danger #f99a9d měla 2,1:1 → tmavý text 8,9:1; světlý režim 5,6:1 */
  --color-link:             light-dark(var(--b-600), var(--b-300));
  --color-success:          light-dark(#167a42, #7fd8a3);
  --color-success-soft:     var(--tone-green-bg);
  --color-warning:          light-dark(#9a5a00, #fdbb74);
  --color-warning-soft:     var(--tone-orange-bg);
  --color-danger:           light-dark(#c62a2f, #f99a9d);
  --color-danger-soft:      var(--tone-red-bg);
  --color-info:             light-dark(var(--b-700), var(--b-300));
  --color-info-soft:        var(--tone-blue-bg);
  --color-backdrop:         light-dark(rgb(16 20 26 / .45), rgb(0 0 0 / .6));
  --mark-bg:                light-dark(#fff3a3, rgb(224 176 0 / .35));

  /* Lišta 1 je tmavá v obou režimech */
  --appbar-bg:        light-dark(var(--n-950), #0b0e12);
  --appbar-fg:        #e8ecf1;
  --appbar-fg-muted:  var(--n-400);
  --appbar-hover:     rgb(255 255 255 / .08);
  --appbar-active:    rgb(255 255 255 / .14);
  --appbar-accent:    var(--b-400);   /* značka a aktivní prvky na tmavé liště */

  /* ---------- Fokus ---------- */
  --focus-ring: 0 0 0 3px light-dark(rgb(58 108 244 / .35), rgb(95 143 249 / .45));

  /* ---------- Tóny (statusy, priority, avatary, swatche) – uzavřená paleta 9 tónů ---------- */
  --tone-grey-dot:   #8b95a3;
  --tone-grey-bg:    light-dark(#eef1f5, rgb(139 149 163 / .18));
  --tone-grey-fg:    light-dark(#3e4756, #c1c9d3);
  --tone-blue-dot:   #3a6cf4;
  --tone-blue-bg:    light-dark(#dbe7ff, rgb(58 108 244 / .20));
  --tone-blue-fg:    light-dark(#1e42bd, #90b4fd);
  --tone-green-dot:  #22a55a;
  --tone-green-bg:   light-dark(#dcf5e5, rgb(34 165 90 / .20));
  --tone-green-fg:   light-dark(#166339, #7fd8a3);
  --tone-orange-dot: #f28a1d;
  --tone-orange-bg:  light-dark(#ffecd6, rgb(242 138 29 / .20));
  --tone-orange-fg:  light-dark(#9a4508, #fdbb74);
  --tone-red-dot:    #e5484d;
  --tone-red-bg:     light-dark(#fde2e3, rgb(229 72 77 / .20));
  --tone-red-fg:     light-dark(#a3242a, #f99a9d);
  --tone-purple-dot: #9b5de5;
  --tone-purple-bg:  light-dark(#efe4fc, rgb(155 93 229 / .22));
  --tone-purple-fg:  light-dark(#5e2c9c, #c9a6f5);
  --tone-black-dot:  light-dark(#1a1f27, #f5f7fa);
  --tone-black-bg:   light-dark(#1a1f27, #d8dee6);
  --tone-black-fg:   light-dark(#ffffff, #10141a);
  --tone-yellow-dot: #e0b000;
  --tone-yellow-bg:  light-dark(#fff5cc, rgb(224 176 0 / .22));
  --tone-yellow-fg:  light-dark(#7a5a00, #f2d466);
  --tone-teal-dot:   #14a39a;
  --tone-teal-bg:    light-dark(#d5f5f2, rgb(20 163 154 / .20));
  --tone-teal-fg:    light-dark(#0d5f5a, #6fd9d0);

  /* ---------- Typografie ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-3xs:  1rem;    /* 10px – iniciály v nejmenším avataru (c-avatar--xs) */
  --fs-3xs:  1rem;    /* 10px – iniciály v nejmenším avataru (c-avatar--xs) */
  --fs-2xs:  1.1rem;  /* 11px – počty v badge */
  --fs-xs:   1.2rem;  /* 12px – meta, hlavička tabulky */
  --fs-sm:   1.3rem;  /* 13px – sekundární text, badge */
  --fs-base: 1.4rem;  /* 14px – základ UI */
  --fs-md:   1.5rem;  /* 15px – čtení rich textu */
  --fs-lg:   1.8rem;  /* 18px – nadpis modálu, h2 */
  --fs-xl:   2.2rem;  /* 22px – nadpis stránky, titulek v draweru */
  --fs-2xl:  2.8rem;  /* 28px – přihlášení */

  --lh-tight: 1.25; --lh-base: 1.5; --lh-relaxed: 1.65;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --ls-tight: -0.011em; --ls-caps: 0.04em;

  /* ---------- Odsazení (4px mřížka) ---------- */
  --sp-0: 0; --sp-half: .2rem; --sp-1: .4rem; --sp-2: .8rem; --sp-3: 1.2rem; --sp-4: 1.6rem;
  --sp-5: 2rem; --sp-6: 2.4rem; --sp-8: 3.2rem; --sp-10: 4rem; --sp-12: 4.8rem; --sp-16: 6.4rem;

  /* ---------- Rádius, stíny, z-index, pohyb ---------- */
  --r-xs: .3rem; --r-sm: .4rem; --r-md: .6rem; --r-lg: 1rem; --r-xl: 1.4rem; --r-full: 999px;
  --stroke-2: 2px; --stroke-3: 3px;   /* tahy silnější než hairline: rámečky, podtržení tabu, akcent alertu a toastu, kroužky fokusu (M9-14, N88) */
  --fs-input-touch: 1.6rem;           /* 16px – pole na mobilu; menší písmo iOS Safari při fokusu přiblíží */
  --lightbox-bg: rgb(8 10 14 / .94); --lightbox-fg: #fff; --lightbox-fg-muted: rgb(255 255 255 / .75);   /* lightbox je vždy tmavý, nezávisle na tématu */
  --stroke-2: 2px; --stroke-3: 3px;   /* tahy silnější než hairline: rámečky, podtržení tabu, akcent alertu a toastu, kroužky fokusu (M9-14, N88) */
  --fs-input-touch: 1.6rem;           /* 16px – pole na mobilu; menší písmo iOS Safari při fokusu přiblíží */
  --lightbox-bg: rgb(8 10 14 / .94); --lightbox-fg: #fff; --lightbox-fg-muted: rgb(255 255 255 / .75);   /* lightbox je vždy tmavý, nezávisle na tématu */

  --sh-xs: 0 1px 2px light-dark(rgb(16 20 26 / .06), rgb(0 0 0 / .40));
  --sh-sm: 0 1px 3px light-dark(rgb(16 20 26 / .08), rgb(0 0 0 / .45)), 0 1px 2px light-dark(rgb(16 20 26 / .04), rgb(0 0 0 / .30));
  --sh-md: 0 8px 24px -4px light-dark(rgb(16 20 26 / .14), rgb(0 0 0 / .55)), 0 2px 6px light-dark(rgb(16 20 26 / .06), rgb(0 0 0 / .40));
  --sh-lg: 0 24px 48px -12px light-dark(rgb(16 20 26 / .24), rgb(0 0 0 / .65));

  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-drawer: 300;
  --z-dropdown: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700;

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ---------- Rozměry layoutu a ovládacích prvků ---------- */
  --appbar-h: 5.2rem; --contextbar-h: 4.4rem; --contextbar-sub-h: 3.6rem; --toolbar-h: 5.2rem;
  --page-gutter: 2.4rem;
  --page-narrow: 72rem; --page-medium: 104rem;
  --drawer-w: 68rem;
  --modal-sm: 42rem; --modal-md: 64rem; --modal-lg: 88rem;
  --control-h-sm: 2.8rem; --control-h: 3.6rem; --control-h-lg: 4.4rem;
  --touch-min: 4.4rem;
  --row-h: 4.8rem; --row-h-compact: 3.6rem;
  --icon-sm: 1.4rem; --icon: 1.6rem; --icon-lg: 2rem; --icon-stroke: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
}

@media (max-width: 767.98px) {
  :root { --page-gutter: 1.6rem; }
}

@media (max-width: 575.98px) {
  :root { --page-gutter: 1.2rem; }
}