/* ============================================================
   EIN Portal — Design Tokens
   Zdroj pravdy: Figma (kánon). Hodnoty 1:1 z Figma variables
   + reálně použitých stylů napříč obrazovkami Dashboard / Projects /
   Project Details / Risk Details.
   Téma: tmavé "bordered-grid" UI (buňky oddělené 1px linkami).
   ============================================================ */

/* ------------------------------------------------------------
   FONTY
   Aeonik a Font Awesome 6 Pro jsou licencované – soubory patří do
   /assets/fonts/ (viz wireframes/FIGMA_WORKFLOW.md). Inter a JetBrains
   Mono jsou volné (self-hosted kvůli CSP – žádné externí CDN).
   Stack obsahuje fallbacky, takže UI funguje i před dodáním Aeonik.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/Aeonik-Regular.woff2") format("woff2"),
       url("/assets/fonts/Aeonik-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/Aeonik-Medium.woff2") format("woff2"),
       url("/assets/fonts/Aeonik-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/assets/fonts/Aeonik-Bold.woff2") format("woff2"),
       url("/assets/fonts/Aeonik-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
/* Font Awesome 6 Pro – @font-face a icon třídy zajišťuje /assets/css/fontawesome.css */

:root {
  color-scheme: dark;   /* nativní form-controls (dropdown selectu, scrollbary, datepicker) tmavě */

  /* ---------- Pozadí / plochy ---------- */
  --bg-standard:     #20262e; /* background/standard – app, karty, topbar, breadcrumb */
  --bg-dark:         #151a20; /* background/dark – sidebar, greeting strip */
  --surface:         #374151; /* gray/700 – inputy, sekundární tlačítka, badge, th, avatar */

  /* ---------- Linky / ohraničení ---------- */
  --border:          #3c4855; /* gray/baseborder – mřížka, oddělovače řádků/buněk */
  --border-control:  #7d879a; /* gray/500 – rámeček inputů/tlačítek */
  --border-chip:     #979ba2; /* gray/400 – rámeček filter chipu */

  /* ---------- Šedá škála (text) ---------- */
  --gray-50:   #f9fafb; /* sidebar nav text, silný text */
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb; /* PRIMÁRNÍ body text na tmavém */
  --gray-300:  #c0c6ce; /* sekundární text, KPI hodnota */
  --gray-400:  #979ba2; /* tlumený text, hlavičky tabulek, KPI labely */
  --gray-500:  #7d879a; /* placeholdery, slabý text (= border-control) */
  --gray-700:  #374151; /* = surface */
  --gray-900:  #1f2937; /* tmavý text na světlých buňkách (color/azure/17-2) */
  --grey-46:   #6b7280; /* color/grey/46-2 */

  /* ---------- Bílá (alfa varianty) ---------- */
  --white:        #ffffff;
  --white-85:     rgba(255,255,255,0.85); /* color/white/85% */
  --white-50:     rgba(255,255,255,0.50); /* color/white/50% */

  /* ---------- Akcent (červená) ---------- */
  --accent:        #d60202; /* heat/5 – primary tlačítka, aktivní tab, env rámeček, role */
  --accent-strong: #b91c1c; /* rag/red-fg, color/red/42 – podtržení titulku karty, badge */
  --accent-bright: #dc2626; /* color/red/51 – env text, dot */
  --accent-light:  #ff7a7a; /* světlá červená – červený TEXT na tmavém pozadí (čitelnost) */

  /* ---------- Stavové (RAG / sémantika) ---------- */
  --rag-red-fg: #b91c1c;
  --success:    #16a34a; /* spring-green/36 */
  --warning:    #d97706; /* orange/44 */

  /* ---------- Heat škála – Risk score / matice (low → high) ---------- */
  --heat-1: #86efac; /* spring-green/73 – Very Low / Low */
  --heat-2: #fde047; /* yellow/64 – Low / Medium */
  --heat-3: #fb923c; /* orange/61 – Medium */
  --heat-4: #f87171; /* red/71 – High */
  --heat-5: #b91c1c; /* red/42 – Very High (buňka matice) */
  --heat-5-solid: #d60202; /* heat/5 – plné červené score badge */

  /* ---------- Tlumená červená škála – grafy, phase, badge ---------- */
  --red-1: #605656;
  --red-2: #6c4444;
  --red-3: #960d0d;
  --red-4: #b40000;

  /* ---------- Dot indikátory (status) ---------- */
  --dot-green:  #16a34a; /* spring-green/36 */
  --dot-orange: #d97706; /* orange/44 */
  --dot-red:    #dc2626; /* red/51 */
  --dot-grey:   #d1d5db; /* azure/84 */

  /* ---------- Spacing (item spacing z Figmy) ---------- */
  --sp-2:  2px;   /* xxxs */
  --sp-4:  4px;   /* xxs */
  --sp-6:  6px;
  --sp-8:  8px;   /* xs */
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;  /* s */
  --sp-24: 24px;  /* s+ */
  --sp-32: 32px;  /* page padding */
  --sp-35: 35px;  /* greeting padding, gap v kartě */

  /* ---------- Vyska ovladacich prvku ---------- */
  /* Jednotna vyska inputu, selectu (nativnich i custom .select-ui) a tlacitek,
     aby toolbary/filtry mely prvky zarovnane na stejnou vysku.
     Slozeni: 2x8px padding + line-height 18px (--lh-sm) + 2x1px ramecek. */
  --control-h: 36px;

  /* ---------- Radius ---------- */
  --radius-2: 2px;  /* badge, risk score badge, tab counter */
  --radius-4: 4px;  /* pagination, horní rohy sloupců grafu, dot, matice */
  --radius-6: 6px;  /* tlačítka */
  --radius-full: 9999px;
  /* Pozn.: inputy/selecty mají dle Figmy ostré rohy (radius 0). */

  /* ---------- Stroke ---------- */
  --stroke-1: 1px;
  --stroke-2: 2px;

  /* ---------- Stíny ---------- */
  --shadow-cell:  0 4px 6px -1px rgba(0,0,0,0.1);   /* aktivní buňka matice */
  --shadow-panel: 0 4px 2px rgba(0,0,0,0.25);       /* sticky form header */

  /* ---------- Opacity ---------- */
  --opacity-70: 0.7;
  --opacity-80: 0.8;

  /* ---------- Fonty ---------- */
  --font-sans:    "Aeonik", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", "Aeonik", -apple-system, system-ui, sans-serif; /* font-1: greeting titulek, čísla v matici */
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;  /* font-2: IDs, čísla */
  --font-icon:    "Font Awesome 6 Pro";

  /* ---------- Type scale (size / line-height) — vše Aeonik ---------- */
  --fs-xxs:  11px; --lh-xxs:  16px;  /* text/xxs */
  --fs-xs:   12px; --lh-xs:   16px;  /* text/xs */
  --fs-sm:   13px; --lh-sm:   18px;  /* text/sm – workhorse */
  --fs-base: 14px; --lh-base: 20px;  /* text/base */
  --fs-dash: 15px; --lh-dash: 20px;  /* text/dashboard – sidebar nav */
  --fs-md:   16px; --lh-md:   20px;
  --fs-lg:   18px; --lh-lg:   26px;  /* text/lg */
  --fs-xl:   22px; --lh-xl:   30px;
  --fs-2xl:  28px; --lh-2xl:  36px;  /* text/2xl – KPI hodnota */
  /* Uppercase micro-labely: bold, výrazný letter-spacing */
  --ls-upp:  0.07em;  /* ~7px na velkém, ~0.77px na 11px (text/xs_upp) */

  /* ---------- Layout ---------- */
  --sidebar-w:    240px;
  --topbar-h:     56px;
  --breadcrumb-h: 40px;
  --content-max:  1440px;

  /* ---------- Motion (vstupní animace stránky) ---------- */
  --ease-enter: cubic-bezier(.2,.7,.3,1);  /* domovský easing (bars/progress) */
  --stage-2: 120ms;   /* data polí: toolbar, KPI hodnoty, card body */
  --stage-3: 240ms;   /* tabulky + grafy (base, + existující stagger) */
}