/* Tokeni dizajna POU Plava — jedino mjesto za boje, slova, razmake, zaobljenja i sjene.
   Vrijednosti boja su ovdje, za svijetlu i tamnu temu; DaisyUI paleta i stari nazivi u themes.css upućuju na njih.
   Nove stranice koriste nazive iz sustava (--primary, --surface …) i komponente iz plava.css. */
:root, html[data-theme="light"] {
  /* Svjetla tema v2: topla papirnata podloga uz živu plavu, da plava ne bude posvuda. */
  --bg: #fbf7f1;               /* pozadina stranice (topli papir) */
  --surface: #ffffff;          /* kartice, polja, tablice */
  --subtle: #f4eee4;           /* zaglavlja tablica, prazna stanja */
  --line: #e8dfd2;             /* ukrasne crte */
  --line-strong: #8b8273;      /* obrub kontrola (3:1) */
  --ink: #12203a;              /* tekst */
  --ink-muted: #535a69;        /* sporedni tekst */
  --primary: #1d5ad8;          /* jedina boja interakcije */
  --primary-strong: #1647b0;   /* prelazak mišem */
  --on-primary: #ffffff;
  --primary-soft: #e6eeff;     /* blaga plava podloga */
  --deep: #0e2b63;             /* uvodne trake, podnožje */
  --on-deep: #ffffff;
  --accent: #f28c38;           /* topli poziv, samo kao podloga */
  --on-accent: #12203a;
  --focus: #1d5ad8;
  --success: #16723f;  --success-soft: #ddf3e6;
  --warning: #975600;  --warning-soft: #fdeed6;
  --danger: #b9342a;   --danger-soft: #fde4e1;  --on-danger: #ffffff;
  --cat-kino: #cfeffd; --cat-kazaliste: #ffe0dc; --cat-obrazovanje: #d6f2df; --cat-dogadanja: #fff4b0;
  --shadow-sm: 0 1px 2px rgba(18, 32, 58, 0.08);
  --shadow-md: 0 12px 32px -12px rgba(18, 32, 58, 0.28);
}
html[data-theme="dark"] {
  --bg: #0a1220;
  --surface: #111c2d;
  --subtle: #172539;
  --line: #23344d;
  --line-strong: #5d7391;
  --ink: #e8eef7;
  --ink-muted: #9fb0c6;
  --primary: #6aa8ff;
  --primary-strong: #8dbcff;
  --on-primary: #071426;
  --primary-soft: #16305a;
  --deep: #050b16;
  --on-deep: #e8eef7;
  --accent: #f2a057;
  --on-accent: #1a0f02;
  --focus: #8dbcff;
  --success: #5fd39a;  --success-soft: #0f2e22;
  --warning: #f5b851;  --warning-soft: #33240c;
  --danger: #ff8a80;   --danger-soft: #3a1614;  --on-danger: #2a0705;
  --cat-kino: #12324a; --cat-kazaliste: #3d1f24; --cat-obrazovanje: #163526; --cat-dogadanja: #35321a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
}
:root {
  /* Boje logotipa: točke programskih linija; iste u obje teme. */
  --mark-sky: #8ed8f8; --mark-coral: #f48580; --mark-mint: #9bd3ae; --mark-yellow: #fff685;

  /* Stari nazivi (components.css, readability.css, predlošci) — upućuju na tokene iznad. */
  --pou-surface: var(--surface);
  --pou-bg: var(--bg);
  --pou-soft: var(--subtle);
  --pou-ink: var(--ink);
  --pou-muted: var(--ink-muted);
  --pou-line: var(--line);
  --pou-blue: var(--primary);
  --pou-blue-soft: var(--primary-soft);
  --pou-primary: var(--primary);
  --pou-primary-ink: var(--on-primary);
  --pou-accent: var(--accent);
  --pou-accent-ink: var(--on-accent);
  --pou-on-strong: var(--on-primary);
  --pou-danger: var(--danger);
  --pou-success: var(--success);
  --pou-warning: var(--warning);
  --pou-focus: var(--focus);

  /* Slova: Bricolage Grotesque za naslove, Figtree za tekst (najmanje 12 px) */
  --font-display: 'Bricolage Grotesque', Figtree, system-ui, sans-serif;
  --font-text: Figtree, system-ui, sans-serif;
  --font-head: var(--font-display);
  --font-body: var(--font-text);
  --fs-xs: 12px;   /* nadnaslovi */
  --fs-sm: 14px;   /* podaci, sporedni tekst, gumbi */
  --fs-md: 16px;   /* tekst */
  --fs-lg: 19px;   /* uvodni odlomak */
  --fs-xl: 22px;   /* naslovi kartica (h3) */
  --fs-2xl: 30px;  /* naslovi dijelova (h2) */
  --fs-3xl: clamp(32px, 4.4vw, 40px); /* naslov stranice (h1) */

  /* Razmaci */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4);
  --sp-5: var(--space-5); --sp-6: var(--space-6); --sp-7: var(--space-7);

  /* Zaobljenja */
  --radius-sm: 6px;     /* oznake u tablicama, mali elementi */
  --radius-md: 10px;    /* gumbi, polja, obavijesti */
  --radius-lg: 16px;    /* kartice, plakati */
  --radius-full: 999px; /* čipovi, oznake */
  --radius-pill: var(--radius-full);

  /* Sjene: površine su ravne, sjena samo za ono što lebdi */
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);

  /* Klikabilne površine */
  --tap: 44px;
}