/* ==========================================================================
   Noční dílna: design tokeny platformy (D-nocnidilna-02, Eva, 2026-09-27)
   KOPIE pro aplikaci Náskoku (D-naskok-DS-06a, 2026-09-27) ze souboru
   TheTeam/workspace/dev/nocnidilna/design/tokens.css. Změna proti zdroji: vynechaná písma
   Source Serif 4 a Fraunces (Náskok je nepoužívá). Náskok se tu přepíná v tokens-naskok.css
   přímo na :root (atribut data-produkt v aplikaci není potřeba).
   Vygenerováno z jedné tabulky barev (design-system.md, oddíl 3) spolu s kontrolou
   kontrastu. Barvu měňte v tabulce a znovu ověřte kontrast, ne jen tady.

   Použití:
   - <html lang="cs" data-produkt="dikta|recepturnik|naskok">; bez atributu = platforma
     (rozcestník nocnidilna.cz).
   - Režim: podle systému (prefers-color-scheme přes color-scheme: light dark), nebo
     vynuceně data-theme="light|dark" na <html> nebo na libovolném oddílu. Barvy jsou
     přes light-dark(), takže se řídí color-scheme nejbližšího předka a vnořené oddíly
     (ukázky, karta produktu v jiné barvě) fungují.
   - Prvek s data-theme nebo data-produkt musí sám nastavit color a background
     (dělá to komponenty.css), jinak zdědí už spočítanou barvu rodiče.
   - Prohlížeče bez light-dark() (vydané před 2024) dostanou blok @supports na konci:
     světlé barvy, tmavé přes @media (prefers-color-scheme: dark) a data-theme="dark".
   - Písma jen z ./pisma/ (SIL OFL 1.1, licence vedle souborů). Žádná cizí doména.
   ========================================================================== */

/* ---------- Písma (SIL OFL 1.1) ---------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("pisma/source-sans-3-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("pisma/source-sans-3-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-024F,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("pisma/source-sans-3-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("pisma/source-sans-3-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-024F,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("pisma/source-sans-3-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("pisma/source-sans-3-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-024F,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF; }

/* ---------- Režim ---------- */
:root { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* ---------- Barvy: platforma (light-dark(světlý, tmavý)) ---------- */
:root {
  --pozadi: light-dark(#F6F4EF, #10121B);
  --plocha: light-dark(#FFFFFF, #191C28);
  --plocha-2: light-dark(#EDEAE2, #151823);
  --text: light-dark(#1A1D29, #ECE9E2);
  --tlumeny: light-dark(#545A6A, #A8ADBD);
  --linka: light-dark(#DCD7CC, #2C3142);
  --linka-pole: light-dark(#767B88, #7D8394);
  --lampa: light-dark(#D99A2B, #F2B84B);
  --lampa-text: light-dark(#855609, #F2C36B);
  --chyba: light-dark(#B3261E, #F2877F);
  --chyba-najeti: light-dark(#8C1D17, #F6A59F);
  --na-chybe: light-dark(#FFFFFF, #1A0B0A);
  --chyba-plocha: light-dark(#FBEAE8, #3A1E1C);
  --uspech: light-dark(#2F6B45, #79C795);
  --uspech-plocha: light-dark(#E6F1E9, #18291F);
  --upozorneni-text: light-dark(#6B4A00, #F0C46B);
  --upozorneni-plocha: light-dark(#FFF4D6, #33290F);
  --upozorneni-linka: light-dark(#B7862A, #8A6A22);
  --neaktivni-plocha: light-dark(#E4E1DA, #252938);
  --neaktivni-text: light-dark(#6E7380, #8A8FA0);
  --produkt: light-dark(#343B7C, #F2B84B);
  --produkt-najeti: light-dark(#272D63, #F6CA73);
  --na-produktu: light-dark(#FFFFFF, #1A1406);
  --produkt-text: light-dark(#343B7C, #F2C36B);
  --produkt-plocha: light-dark(#E9EAF5, #252333);
  --produkt-akcent: light-dark(#D99A2B, #9FA8E8);
  --stin-barva: light-dark(rgb(26 29 41 / 0.10), rgb(0 0 0 / 0.45));
  --zavoj: light-dark(rgb(16 18 27 / 0.55), rgb(0 0 0 / 0.70));
  --kostra: light-dark(#E6E2D9, #262A39);
}

/* ---------- Barvy: produkt (přebíjí --produkt-*) ---------- */
[data-produkt="dikta"] {
  --produkt: light-dark(#2563EB, #4B8DFB);
  --produkt-najeti: light-dark(#1D4ED8, #6EA2FC);
  --na-produktu: light-dark(#FFFFFF, #06101F);
  --produkt-text: light-dark(#1D4ED8, #7DB0FF);
  --produkt-plocha: light-dark(#E8EFFD, #16223A);
  --produkt-akcent: light-dark(#2563EB, #4B8DFB);
}
[data-produkt="recepturnik"] {
  --produkt: light-dark(#2E6B4F, #7CC4A0);
  --produkt-najeti: light-dark(#245740, #97D3B4);
  --na-produktu: light-dark(#FFFFFF, #0C1A13);
  --produkt-text: light-dark(#2E6B4F, #8FD0AE);
  --produkt-plocha: light-dark(#E5F0E9, #15251D);
  --produkt-akcent: light-dark(#96501A, #E0A26A);
}
[data-produkt="naskok"] {
  --produkt: light-dark(#0A5C55, #5FC4B8);
  --produkt-najeti: light-dark(#07443F, #86D6CC);
  --na-produktu: light-dark(#FFFFFF, #06201D);
  --produkt-text: light-dark(#0A5C55, #6FD1C4);
  --produkt-plocha: light-dark(#E3F1EF, #13272A);
  --produkt-akcent: light-dark(#0A5C55, #5FC4B8);
}
[data-produkt="platforma"] {
  --produkt: light-dark(#343B7C, #F2B84B);
  --produkt-najeti: light-dark(#272D63, #F6CA73);
  --na-produktu: light-dark(#FFFFFF, #1A1406);
  --produkt-text: light-dark(#343B7C, #F2C36B);
  --produkt-plocha: light-dark(#E9EAF5, #252333);
  --produkt-akcent: light-dark(#D99A2B, #9FA8E8);
}

/* ---------- Písma, velikosti, mřížka, rozestupy ---------- */
:root {
  --pismo-sans: "Source Sans 3", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --pismo-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pismo-fraunces: "Fraunces", Georgia, "Times New Roman", serif;
  --pismo-system: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pismo-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* stupnice: mobil 360 px -> počítač 1200 px */
  --velikost-xs: 0.8125rem;                                    /* 13 px: jen štítky a kódy */
  --velikost-s: 0.9375rem;                                     /* 15 px: nápovědy, patička */
  --velikost-m: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);      /* 16 -> 17 px: text */
  --velikost-l: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);    /* 18 -> 20 px: úvodní odstavec */
  --velikost-h4: 1.0625rem;                                    /* 17 px */
  --velikost-h3: clamp(1.1875rem, 1.13rem + 0.24vw, 1.375rem); /* 19 -> 22 px */
  --velikost-h2: clamp(1.5rem, 1.33rem + 0.72vw, 2rem);        /* 24 -> 32 px */
  --velikost-h1: clamp(1.875rem, 1.6rem + 1.2vw, 2.75rem);     /* 30 -> 44 px */
  --velikost-display: clamp(2.25rem, 1.76rem + 2.1vw, 3.5rem); /* 36 -> 56 px: jen úvod rozcestníku */
  --radek-text: 1.55;
  --radek-nadpis: 1.2;
  --sirka-textu: 42rem;                                        /* asi 68 znaků na řádek */

  /* rozestupy po 4 px */
  --m-1: 0.25rem; --m-2: 0.5rem; --m-3: 0.75rem; --m-4: 1rem;
  --m-5: 1.5rem;  --m-6: 2rem;   --m-7: 3rem;    --m-8: 4rem; --m-9: 6rem;

  /* mřížka; zlomy v media queries: 48rem (768 px) a 64rem (1024 px) */
  --sirka-obsahu: 72rem;                                       /* 1152 px */
  --okraj-stranky: clamp(1rem, 0.57rem + 1.9vw, 2rem);         /* 16 -> 32 px */
  --mezera-mrizky: clamp(1rem, 0.86rem + 0.6vw, 1.5rem);       /* 16 -> 24 px */
  --oddil: clamp(3rem, 2.14rem + 3.8vw, 6rem);                 /* svislá mezera oddílů 48 -> 96 px */

  /* ovládací prvky */
  --vyska-prvku: 2.75rem;                                      /* 44 px: nejmenší cíl dotyku */
  --vyska-tlacitka: 3rem;                                      /* 48 px */
  --polomer-s: 6px;
  --polomer-pole: 8px;
  --fokus-sirka: 3px;
  --fokus-odsazeni: 2px;                                       /* barva fokusu = --produkt-text */
  --stin-1: 0 1px 2px var(--stin-barva);
  --stin-2: 0 1px 2px var(--stin-barva), 0 8px 24px var(--stin-barva);
  --prechod: 150ms ease-out;
  --vrstva-hlavicka: 10;
  --vrstva-okno: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --prechod: 0ms; }
}

/* ---------- Písmo a tvar produktu ---------- */
:root, [data-produkt="platforma"] {
  --pismo-text: var(--pismo-sans);
  --pismo-nadpis: var(--pismo-serif);
  --vaha-nadpis: 600;
  --pismo-znacka: var(--pismo-serif);
  --polomer-tlacitko: 8px;
  --polomer-karta: 12px;
}
[data-produkt="dikta"] {
  --pismo-text: var(--pismo-system);
  --pismo-nadpis: var(--pismo-system);
  --vaha-nadpis: 700;
  --pismo-znacka: var(--pismo-system);
  --polomer-tlacitko: 8px;
  --polomer-karta: 12px;
}
[data-produkt="recepturnik"] {
  --pismo-text: var(--pismo-sans);
  --pismo-nadpis: var(--pismo-fraunces);
  --vaha-nadpis: 600;
  --pismo-znacka: var(--pismo-fraunces);
  --polomer-tlacitko: 8px;
  --polomer-karta: 10px;
}
[data-produkt="naskok"] {
  --pismo-text: var(--pismo-sans);
  --pismo-nadpis: var(--pismo-sans);
  --vaha-nadpis: 700;
  --pismo-znacka: var(--pismo-sans);
  --polomer-tlacitko: 12px;
  --polomer-karta: 12px;
}

/* ---------- Záloha pro prohlížeče bez light-dark() ---------- */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --pozadi: #F6F4EF;
    --plocha: #FFFFFF;
    --plocha-2: #EDEAE2;
    --text: #1A1D29;
    --tlumeny: #545A6A;
    --linka: #DCD7CC;
    --linka-pole: #767B88;
    --lampa: #D99A2B;
    --lampa-text: #855609;
    --chyba: #B3261E;
    --chyba-najeti: #8C1D17;
    --na-chybe: #FFFFFF;
    --chyba-plocha: #FBEAE8;
    --uspech: #2F6B45;
    --uspech-plocha: #E6F1E9;
    --upozorneni-text: #6B4A00;
    --upozorneni-plocha: #FFF4D6;
    --upozorneni-linka: #B7862A;
    --neaktivni-plocha: #E4E1DA;
    --neaktivni-text: #6E7380;
    --produkt: #343B7C;
    --produkt-najeti: #272D63;
    --na-produktu: #FFFFFF;
    --produkt-text: #343B7C;
    --produkt-plocha: #E9EAF5;
    --produkt-akcent: #D99A2B;
    --stin-barva: rgb(26 29 41 / 0.10);
    --zavoj: rgb(16 18 27 / 0.55);
    --kostra: #E6E2D9;
  }
  [data-produkt="dikta"] {
    --produkt: #2563EB;
    --produkt-najeti: #1D4ED8;
    --na-produktu: #FFFFFF;
    --produkt-text: #1D4ED8;
    --produkt-plocha: #E8EFFD;
    --produkt-akcent: #2563EB;
  }
  [data-produkt="recepturnik"] {
    --produkt: #2E6B4F;
    --produkt-najeti: #245740;
    --na-produktu: #FFFFFF;
    --produkt-text: #2E6B4F;
    --produkt-plocha: #E5F0E9;
    --produkt-akcent: #96501A;
  }
  [data-produkt="naskok"] {
    --produkt: #0A5C55;
    --produkt-najeti: #07443F;
    --na-produktu: #FFFFFF;
    --produkt-text: #0A5C55;
    --produkt-plocha: #E3F1EF;
    --produkt-akcent: #0A5C55;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --pozadi: #10121B;
      --plocha: #191C28;
      --plocha-2: #151823;
      --text: #ECE9E2;
      --tlumeny: #A8ADBD;
      --linka: #2C3142;
      --linka-pole: #7D8394;
      --lampa: #F2B84B;
      --lampa-text: #F2C36B;
      --chyba: #F2877F;
      --chyba-najeti: #F6A59F;
      --na-chybe: #1A0B0A;
      --chyba-plocha: #3A1E1C;
      --uspech: #79C795;
      --uspech-plocha: #18291F;
      --upozorneni-text: #F0C46B;
      --upozorneni-plocha: #33290F;
      --upozorneni-linka: #8A6A22;
      --neaktivni-plocha: #252938;
      --neaktivni-text: #8A8FA0;
      --produkt: #F2B84B;
      --produkt-najeti: #F6CA73;
      --na-produktu: #1A1406;
      --produkt-text: #F2C36B;
      --produkt-plocha: #252333;
      --produkt-akcent: #9FA8E8;
      --stin-barva: rgb(0 0 0 / 0.45);
      --zavoj: rgb(0 0 0 / 0.70);
      --kostra: #262A39;
    }
    :root:not([data-theme="light"])[data-produkt="dikta"] {
      --produkt: #4B8DFB;
      --produkt-najeti: #6EA2FC;
      --na-produktu: #06101F;
      --produkt-text: #7DB0FF;
      --produkt-plocha: #16223A;
      --produkt-akcent: #4B8DFB;
    }
    :root:not([data-theme="light"])[data-produkt="recepturnik"] {
      --produkt: #7CC4A0;
      --produkt-najeti: #97D3B4;
      --na-produktu: #0C1A13;
      --produkt-text: #8FD0AE;
      --produkt-plocha: #15251D;
      --produkt-akcent: #E0A26A;
    }
    :root:not([data-theme="light"])[data-produkt="naskok"] {
      --produkt: #5FC4B8;
      --produkt-najeti: #86D6CC;
      --na-produktu: #06201D;
      --produkt-text: #6FD1C4;
      --produkt-plocha: #13272A;
      --produkt-akcent: #5FC4B8;
    }
  }
  [data-theme="dark"] {
    --pozadi: #10121B;
    --plocha: #191C28;
    --plocha-2: #151823;
    --text: #ECE9E2;
    --tlumeny: #A8ADBD;
    --linka: #2C3142;
    --linka-pole: #7D8394;
    --lampa: #F2B84B;
    --lampa-text: #F2C36B;
    --chyba: #F2877F;
    --chyba-najeti: #F6A59F;
    --na-chybe: #1A0B0A;
    --chyba-plocha: #3A1E1C;
    --uspech: #79C795;
    --uspech-plocha: #18291F;
    --upozorneni-text: #F0C46B;
    --upozorneni-plocha: #33290F;
    --upozorneni-linka: #8A6A22;
    --neaktivni-plocha: #252938;
    --neaktivni-text: #8A8FA0;
    --produkt: #F2B84B;
    --produkt-najeti: #F6CA73;
    --na-produktu: #1A1406;
    --produkt-text: #F2C36B;
    --produkt-plocha: #252333;
    --produkt-akcent: #9FA8E8;
    --stin-barva: rgb(0 0 0 / 0.45);
    --zavoj: rgb(0 0 0 / 0.70);
    --kostra: #262A39;
  }
  [data-theme="dark"][data-produkt="dikta"], [data-theme="dark"] [data-produkt="dikta"] {
    --produkt: #4B8DFB;
    --produkt-najeti: #6EA2FC;
    --na-produktu: #06101F;
    --produkt-text: #7DB0FF;
    --produkt-plocha: #16223A;
    --produkt-akcent: #4B8DFB;
  }
  [data-theme="dark"][data-produkt="recepturnik"], [data-theme="dark"] [data-produkt="recepturnik"] {
    --produkt: #7CC4A0;
    --produkt-najeti: #97D3B4;
    --na-produktu: #0C1A13;
    --produkt-text: #8FD0AE;
    --produkt-plocha: #15251D;
    --produkt-akcent: #E0A26A;
  }
  [data-theme="dark"][data-produkt="naskok"], [data-theme="dark"] [data-produkt="naskok"] {
    --produkt: #5FC4B8;
    --produkt-najeti: #86D6CC;
    --na-produktu: #06201D;
    --produkt-text: #6FD1C4;
    --produkt-plocha: #13272A;
    --produkt-akcent: #5FC4B8;
  }
}