/* ============================================================
   Branislav Jankovič — design tokeny
   Verzia 1.0 · 2026-09-19
   Všetky farebné kombinácie overené na WCAG 2.1 kontrast (AA+).
   ============================================================ */

/* ---------- 1. ZNAČKOVÉ FARBY (nemenné, identita) ---------- */
:root {
  --brand-indigo:            #46608C;  /* primárna značková */
  --brand-terracotta:        #D97B4F;  /* akcentová — LOGO a dekorácia */

  /* Funkčné odtiene terakoty. Pôvodná #D97B4F má na svetlom pozadí
     kontrast len 2.80 a ako text/tlačidlo je nečitateľná.
     Preto: tmavší odtieň do svetlého režimu, svetlejší do tmavého. */
  --brand-terracotta-deep:   #B55427;  /* text a tlačidlá — svetlý režim */
  --brand-terracotta-light:  #DD8962;  /* text a akcenty — tmavý režim */
}

/* ---------- 2. SÉMANTICKÉ TOKENY — SVETLÝ REŽIM ----------
   Použitie: dokumenty, ponuky, reporty, tlač. */
:root {
  --bg:              #F7F5F1;
  --surface:         #FFFFFF;
  --surface-sunken:  #F0EDE7;
  --tint-warn:       #F5E2D8;   /* pozadie .warn callout boxu — len svetlý režim, len tlač */

  --text:            #2B2B2B;   /* 13.00 na --bg  → AAA */
  --text-muted:      #5C6169;   /*  5.72 na --bg  → AA  */
  --text-heading:    #46608C;   /*  5.82 na --bg  → AA  */
  --text-accent:     #B55427;   /*  4.52 na --bg  → AA  */

  --border:          #E1DDD5;
  --border-strong:   #CFC9BE;

  --action-bg:       #46608C;   /* primárne tlačidlo */
  --action-fg:       #FFFFFF;   /*  6.34 → AA */
  --action-bg-hover: #3A5177;

  --accent-bg:       #B55427;   /* akcentové tlačidlo */
  --accent-fg:       #FFFFFF;   /*  4.93 → AA */
  --accent-bg-hover: #9C4620;

  --decor:           #D97B4F;   /* linky, oddeľovače, čiary — NIKDY text */

  /* Stavová paleta. Hue zámerne mimo terakoty (19°) a indiga (218°):
     danger 8°, warning 44°, success 152°. Hodnoty prepočítané cez WCAG
     relatívnu luminanciu, nie odhadnuté. */
  --status-danger:     #C93C26;  /*  4.64 na --bg  → AA (text/ikona) */
  --status-danger-bg:  #CE3D27;  /* biely text 4.86 → AA (vyplň odznaku) */
  --status-danger-fg:  #FFFFFF;

  --status-warning:    #8A6B14;  /*  4.60 na --bg  → AA (text/ikona) */
  --status-warning-bg: #8F6E14;  /* biely text 4.76 → AA (vyplň odznaku) */
  --status-warning-fg: #FFFFFF;

  --status-success:    #307E59;  /*  4.53 na --bg  → AA (text/ikona) */
  --status-success-bg: #31815C;  /* biely text 4.75 → AA (vyplň odznaku) */
  --status-success-fg: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(35, 45, 64, 0.07);
  --shadow-md: 0 2px 8px rgba(35, 45, 64, 0.10);
}

/* ---------- 3. SÉMANTICKÉ TOKENY — TMAVÝ REŽIM ----------
   Použitie: web, LinkedIn, social. NIKDY dokumenty pre klientov. */
:root[data-theme="dark"] {
  --bg:              #232D40;
  --surface:         #2A364C;
  --surface-sunken:  #1C2434;

  --text:            #FFFFFF;   /* 13.81 na --bg → AAA */
  --text-muted:      #A8B6CA;   /*  6.71 na --bg → AA  */
  --text-heading:    #FFFFFF;
  --text-accent:     #DD8962;   /*  5.15 na --bg, 4.52 na --surface → AA */

  --brand-label:     #9BB3D1;   /*  6.42 na --bg → AA (meno v hlavičke) */

  --border:          rgba(255, 255, 255, 0.12);
  --border-strong:   rgba(255, 255, 255, 0.22);

  --action-bg:       #9BB3D1;
  --action-fg:       #232D40;   /*  6.42 → AA */
  --action-bg-hover: #B3C6DD;

  --accent-bg:       #D97B4F;
  --accent-fg:       #232D40;   /*  4.53 → AA — pozor, NIE biely text (len 3.05) */
  --accent-bg-hover: #E08F68;

  --decor:           #D97B4F;

  /* Stavová paleta — tmavý režim. Text/ikona sú svetlé odtiene čitateľné
     na --bg aj --surface; vyplň odznaku (-bg/-fg) je rovnaká ako v svetlom
     režime, lebo odznak je samostatný farebný čip s vlastným kontrastom.
     POZOR: --status-danger má voči --brand-terracotta-light len 11° rozdiel
     v hue a podobnú svetlosť/sýtosť — v tmavom režime sa nedajú spoľahlivo
     rozlíšiť len farbou. Stav preto vždy dopĺňaj ikonou alebo tvarom. */
  --status-danger:     #E58576;  /*  4.58 na --bg / 4.59 na --surface → AA */
  --status-danger-bg:  #CE3D27;
  --status-danger-fg:  #FFFFFF;

  --status-warning:    #C4971C;  /*  4.72 na --bg / 4.50 na --surface → AA */
  --status-warning-bg: #8F6E14;
  --status-warning-fg: #FFFFFF;

  --status-success:    #43B17E;  /*  4.55 na --bg / 4.52 na --surface → AA */
  --status-success-bg: #31815C;
  --status-success-fg: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #232D40; --surface: #2A364C; --surface-sunken: #1C2434;
    --text: #FFFFFF; --text-muted: #A8B6CA; --text-heading: #FFFFFF;
    --text-accent: #DD8962; --brand-label: #9BB3D1;
    --border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.22);
    --action-bg: #9BB3D1; --action-fg: #232D40; --action-bg-hover: #B3C6DD;
    --accent-bg: #D97B4F; --accent-fg: #232D40; --accent-bg-hover: #E08F68;
    --decor: #D97B4F;
    --status-danger: #E58576; --status-danger-bg: #CE3D27; --status-danger-fg: #FFFFFF;
    --status-warning: #C4971C; --status-warning-bg: #8F6E14; --status-warning-fg: #FFFFFF;
    --status-success: #43B17E; --status-success-bg: #31815C; --status-success-fg: #FFFFFF;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.38);
  }
}

/* ---------- 4. TYPOGRAFIA ---------- */
:root {
  --font-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace; /* kód, názvy súborov (V6, 2026-09-20) */
  /* Pre Word/Excel sa brandové fonty NEPOUŽÍVAJÚ — viď design manuál. */

  --size-display: 2.75rem;  /* 44px — hero */
  --size-h1:      2.125rem; /* 34px */
  --size-h2:      1.625rem; /* 26px */
  --size-h3:      1.25rem;  /* 20px */
  --size-body-lg: 1.0625rem;/* 17px */
  --size-body:    0.9375rem;/* 15px */
  --size-small:   0.8125rem;/* 13px */
  --size-caption: 0.6875rem;/* 11px */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --track-tight: -0.02em;   /* nadpisy a logo */
  --track-caption: 0.08em;  /* verzálkové popisky */
}

/* ---------- 4b. TLAČOVÁ TYPOGRAFIA (G5) ----------
   Formalizuje veľkosti, ktoré sa reálne používajú v manual-zdroj.html.
   Samostatná škála od obrazovkovej vyššie — bez prevodu medzi nimi. */
:root {
  --print-size-h2:   15pt;
  --print-size-h3:   11pt;
  --print-size-body: 10pt;
}

/* ---------- 4c. VEĽKÉ PLÁTNO — TYPOGRAFIA (G5) ----------
   Social carousel, prezentačné slidy. Samostatná škála, nie prevod
   z obrazovkovej — čitacia vzdialenosť a rozlíšenie sú iné.
   Otestované na šírke plátna 1080–1920px. */
:root {
  --canvas-size-display: 88px;
  --canvas-size-h1:      72px;
  --canvas-size-h2:      60px;
  --canvas-size-h3:      52px;
}

/* ---------- 5. ODSTUPY, POLOMERY ---------- */
:root {
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    /* 96px / 128px — len pre veľké sekcie, hero (G4) */

  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 10px;  --radius-pill: 999px;
}

/* ---------- 5c. TLAČOVÉ ODSTUPY (mm) (G3) ----------
   Formalizuje škálu, ktorá sa reálne používa v manual-zdroj.html
   a v tlačených dokumentoch (ponuky, reporty, faktúry). Samostatná
   od obrazovkovej --sp-* škály (px) vyššie — bez prevodu medzi nimi. */
:root {
  --print-sp-1: 3mm;
  --print-sp-2: 4mm;
  --print-sp-3: 6mm;
  --print-sp-4: 8mm;
  --print-sp-5: 12mm;
  --print-sp-6: 18mm;
  --print-sp-7: 20mm;
}

/* ---------- 5b. DÁTOVÁ PALETA GRAFOV (G11) ----------
   Odvodená od indiga, nie zo značkových farieb — tie nesú len akcent.
   Všetky 4 odtiene overené na kontrast ≥3:1 voči --bg (norma pre grafické prvky). */
:root {
  --chart-1: #293851;  /* 10.84 na #F7F5F1 — najtmavší, najdôležitejší rad */
  --chart-2: #374A6D;  /*  8.16 */
  --chart-3: #465F8B;  /*  5.90 — takmer totožný s --brand-indigo */
  --chart-4: #5C7AAD;  /*  3.98 — najsvetlejší, stále nad 3:1 */
}

/* ---------- 6. ZÁKLADNÉ PRVKY ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-base);
}

/* H1/H2 = indigo, značia hranicu sekcie. H3+ = farba bežného textu,
   sú súčasťou plynulého čítania (rozhoduje G32/V3). */
h1, h2, .heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--text-heading);
}
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--text);
}

/* Textový odkaz — terakota, vždy podčiarknuté, zámerne odlíšené od nadpisov (R1). */
a {
  color: var(--text-accent);
  text-decoration: underline;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--decor);
  outline-offset: 1px;
}
[disabled], .is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Finančné tabuľky: číslice rovnakej šírky, inak sa stĺpce nezarovnajú. */
table, .tabular, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
th {
  text-align: left;
  font-size: var(--size-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 var(--sp-2) var(--sp-2) 0;
  border-bottom: 1px solid var(--border-strong);
}
td {
  padding: var(--sp-3) var(--sp-2) var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-small);
  padding: var(--sp-3) var(--sp-5);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--action-bg);
  color: var(--action-fg);
}
.btn:hover { background: var(--action-bg-hover); }

.btn--accent { background: var(--accent-bg); color: var(--accent-fg); }
.btn--accent:hover { background: var(--accent-bg-hover); }

.btn--ghost {
  background: transparent;
  color: var(--text-heading);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

/* Stavový odznak — vždy s ikonou/tvarom navyše, nikdy len farba (viď G2). */
.badge--status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  color: #FFFFFF;
}
.badge--status.is-danger  { background: var(--status-danger-bg); }
.badge--status.is-warning { background: var(--status-warning-bg); }
.badge--status.is-success { background: var(--status-success-bg); }

/* Stavový text/ikona priamo na --bg alebo --surface (nie odznak). */
.text--danger  { color: var(--status-danger); }
.text--warning { color: var(--status-warning); }
.text--success { color: var(--status-success); }