/*
 * tokens.css – cassiopeia_drevocentrum (T8 „Hluboký smrk“, finále; R20 paleta „Petrolej“ – odlišení od Kolničky, názvy --f8-smrk* zůstávají)
 * Zdroj hodnot: podklady-specifikace.md kap. 1 (tokeny), 5.1 (mobilní hodnoty), 6.1 (Nábytkové studio).
 * Názvy --f8-* se nemění. Zástupky fotek --f8-foto-* se na web nepřenášejí.
 * Kontrasty textových dvojic jsou ověřené skriptem (qa/kontrast.py), viz tabulka v podkladech 1.1.
 */

/* ---------- Písma (self-host, subset latin-ext, variabilní osy) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 112%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var-latin-ext.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Barvy a role */
  --f8-smrk: #175463;       /* R20 petrolej (dřív smrk #22513F): odkaz na vápně 7,36, bílá na něm 8,45, vápno na něm 7,36 */
  --f8-smrk-deep: #0E3742;  /* R20 hluboký petrolej (dřív #173B2E): vápno 11,13, on-muted 8,70, dřevo 8,43, azur 6,46 */
  --f8-vapno: #EDEFEC;      /* R20b: chladnější neutrál k petroleji (dřív #EEF0EA) */
  --f8-vapno-2: #E1E6E5;
  --f8-drevo: #E9CF9B;      /* R20 světlejší buk (dřív #E3C994, blízko mosazi Kolničky): ink 10,94, ink-700 6,74 */
  --f8-drevo-100: #F4EAD4;  /* R13: plocha stavu „za chvíli zavíráme“ (ink 15,6 : 1) */
  --f8-leseni: #1F4E79;     /* R13: pás Pronájem a půjčovna lešení (bílá 8,6 : 1) */
  --f8-leseni-zluta: #FFC20E; /* R13: tlačítko a grafika lešení (ink 11,4 : 1), fokus na modré */
  --f8-leseni-on-muted: #C8D8E8; /* R13: pomocný text na modré lešení (6,2 : 1) */
  --f8-azur: #00C8F8;
  --f8-azur-100: #E1F6FE;
  --f8-ink: #142026;        /* R20b: na vápně 14,36 */
  --f8-ink-700: #35434A;    /* R20b: na vápně 8,84, na dřevě 6,75 */
  --f8-ink-600: #4A575A;    /* R20b: na vápně 6,48, na bílé 7,49 */
  --f8-white: #FFFFFF;
  --f8-line: #C6CDCC;
  --f8-chyba: #9B1C1C;     /* chyba ve formuláři: text a rámeček (R5), vždy s textem zprávy */
  --f8-on: #EDEFEC;
  --f8-on-muted: #C3D9DE;   /* R20: na hl. petroleji 8,70, na petroleji 5,76 */
  --f8-on-line: #4E7F8B;     /* R20b: dělicí linky na petroleji (2,88 na hl. petroleji) */

  /* Barevný kód oborů: jen 8px linka, nikdy text */
  --f8-kod-stavba: #9C7A45;  /* R20b: 3,44 na vápně (netext ≥ 3) */
  --f8-kod-truhlari: #6B4A35;
  --f8-kod-dum: #5E8C98;     /* R20b: šedomodrá, odlišná od petroleje odkazů (3,2 na vápně) */

  /* Vzorník (dekor, aria-hidden, nikdy text) */
  --f8-s-1: #F0EADF; --f8-s-2: #E4D3B4; --f8-s-3: #C98F55; --f8-s-4: #DCE3E4;
  --f8-s-5: #93A9B3; --f8-s-6: #4F6D80; --f8-s-7: #E3C994; --f8-s-8: #B07A47;
  --f8-s-9: #6B4A35; --f8-s-10: #F2F2EE; --f8-s-11: #B9BBB5; --f8-s-12: #5E615C;
  --f8-mapa: #D3D9CF;

  /* Písma */
  --f8-font: "Archivo", "Arial Nova", Arial, "Helvetica Neue", system-ui, sans-serif;
  --f8-font-display: "Schibsted Grotesk", "Archivo", "Arial Nova", Arial, sans-serif;
  --f8-stretch-data: 112%;
  --f8-stretch-nadpis: 108%;
  --f8-num-data: tabular-nums lining-nums;
  --f8-num-text: proportional-nums lining-nums;

  /* Velikosti (8 na desktopu; mobil viz @media níže) */
  --f8-fs-h1: 4rem;
  --f8-fs-h2: 3rem;
  --f8-fs-h3: 1.75rem;
  --f8-fs-data: 1.625rem;
  --f8-fs-h4: 1.375rem;
  --f8-fs-body: 1.125rem;
  --f8-fs-ui: 1.0625rem;
  --f8-fs-small: 1rem;
  --f8-lh-body: 1.55;

  /* Mezery (4 8 12 16 24 32 48 64 96 128) a mřížka */
  --f8-sp-1: 4px; --f8-sp-2: 8px; --f8-sp-3: 12px; --f8-sp-4: 16px; --f8-sp-5: 24px;
  --f8-sp-6: 32px; --f8-sp-7: 48px; --f8-sp-8: 64px; --f8-sp-9: 96px; --f8-sp-10: 128px;
  --f8-gutter: 24px;
  --f8-kontejner: 1280px;
  --f8-mezera-mrizky: 24px;
  --f8-radius: 2px;
  --f8-cil: 44px;          /* minimální dotykový cíl */
  --f8-rytmus: var(--f8-sp-10); /* svislý rytmus bloků: 128 desktop, 64 mobil */

  /* Role používané komponentami (přepíná je kontext: .dc-tmave, .dc-svetle, body.studio) */
  --dc-akcent: var(--f8-smrk);
  --dc-akcent-deep: var(--f8-smrk-deep);
  --dc-text: var(--f8-ink);
  --dc-text-tlumeny: var(--f8-ink-600);
  --dc-odkaz: var(--f8-smrk);
  --dc-odkaz-hover: var(--f8-smrk-deep);
  --dc-fokus: var(--f8-smrk);
  --dc-linka: var(--f8-line);

  /* Mapování na proměnné Cassiopeie a Bootstrapu */
  --cassiopeia-color-primary: var(--f8-smrk);
  --cassiopeia-color-link: var(--f8-smrk);
  --cassiopeia-color-hover: var(--f8-smrk-deep);
  --link-color: var(--f8-smrk);
  --link-color-rgb: 23, 84, 99;
  --link-hover-color: var(--f8-smrk-deep);
  --link-hover-color-rgb: 14, 55, 66;
  --cassiopeia-font-family-body: var(--f8-font);
  --cassiopeia-font-family-headings: var(--f8-font-display);
  --cassiopeia-font-weight-headings: 800;
  --cassiopeia-scroll-margin-top: 7rem;
  --bs-body-font-family: var(--f8-font);
  --bs-body-color: var(--f8-ink);
  --bs-body-bg: var(--f8-vapno);
  --bs-border-color: var(--f8-line);
}

/* Nábytkové studio (R8): akcent ořech. Tokeny --dc-akcent-studio jsou jediný zdroj hodnoty; --st-* jsou jejich aliasy pro komponenty studia.
   Třída těla "studio" (parametr stylu Studio, CSS třída stránky položky menu, nebo ji nastaví index.php podle layoutu dc-studio-obsah)
   přepne akcent celé stránky; kořen layoutů studia má třídu .dc-studio-obsah, která přepíná akcent jen v obsahu (hlavička a patička zůstávají smrk). */
:root {
  --dc-akcent-studio: #6B4A35;
  --dc-akcent-studio-deep: #45301F;
  --dc-studio-on-muted: #D8CABB;
  --dc-studio-on-line: #6A5242;
  --dc-studio-100: #F2EBE3;
}
body.studio, .dc-studio-obsah {
  --st-orech: var(--dc-akcent-studio);
  --st-orech-deep: var(--dc-akcent-studio-deep);
  --st-on-muted: var(--dc-studio-on-muted);
  --st-on-line: var(--dc-studio-on-line);
  --st-orech-100: var(--dc-studio-100);
  --dc-akcent: var(--dc-akcent-studio);
  --dc-akcent-deep: var(--dc-akcent-studio-deep);
  --dc-odkaz: var(--dc-akcent-studio);
  --dc-odkaz-hover: var(--dc-akcent-studio-deep);
  --dc-fokus: var(--dc-akcent-studio);
  --link-color: var(--dc-akcent-studio);
  --link-hover-color: var(--dc-akcent-studio-deep);
}

/* Tmavý kontext (petrolej, hluboký petrolej, ořech-deep): odkazy vápno, fokus azur */
.dc-tmave {
  --dc-text: var(--f8-on);
  --dc-text-tlumeny: var(--f8-on-muted);
  --dc-odkaz: var(--f8-on);
  --dc-odkaz-hover: var(--f8-white);
  --dc-fokus: var(--f8-azur);
  --dc-linka: var(--f8-on-line);
}
body.studio .dc-pas.dc-tmave { --dc-text-tlumeny: var(--st-on-muted); --dc-linka: var(--st-on-line); }
/* Světlý ostrov uvnitř tmavého (vápenný pult): odkazy a fokus zpět ve smrku */
.dc-tmave .dc-svetle {
  --dc-text: var(--f8-ink);
  --dc-text-tlumeny: var(--f8-ink-600);
  --dc-odkaz: var(--dc-akcent);
  --dc-odkaz-hover: var(--dc-akcent-deep);
  --dc-fokus: var(--dc-akcent);
  --dc-linka: var(--f8-line);
}

/* Zlom T (640–1023): menší nadpisy, ostatní beze změny */
@media (max-width: 1023.98px) {
  :root { --f8-fs-h1: 3rem; --f8-fs-h2: 2.5rem; --f8-rytmus: var(--f8-sp-9); }
}

/* Zlom M (< 640): mobilní tokeny, 7 velikostí, nic pod 16 px */
@media (max-width: 639.98px) {
  :root {
    --f8-fs-h1: 2.5rem;
    --f8-fs-h2: 2rem;
    --f8-fs-h3: 1.5rem;
    --f8-fs-data: 1.375rem;
    --f8-fs-h4: 1.1875rem;
    --f8-fs-body: 1.0625rem;
    --f8-fs-ui: 1.0625rem;
    --f8-fs-small: 1rem;
    --f8-gutter: 16px;
    --f8-rytmus: var(--f8-sp-8);
  }
}