/* ================================================================
   EPO.SI — Design Tokens
   Ena resnica za barve, tipografijo, razmike, globino in gibanje.
   Vse komponente v style.css berejo vrednosti od tod — nič trdo
   kodiranih barv / velikosti / senc zunaj te datoteke.
   ================================================================ */

:root {
  /* ── Barve — nevtralna lestvica ─────────────────────────────── */
  /* Topel, skoraj črn odtenek (ne hladno-modri "SaaS" navy) —
     občutek papirja/lesa v temi, ne zaslona. */
  --bg:             #17130f;
  --surface:        #1f1a14;
  --surface-raised: #29221a;
  --border:         rgba(255, 244, 230, 0.07);
  --border-strong:  rgba(255, 244, 230, 0.16);

  --text:           #f6f0e6;
  --text-muted:     #b3a696;  /* ~7.7:1 na --bg */
  --text-subtle:    #8a7d6d;  /* ~4.6:1 na --bg — samo za drobne oznake */

  /* ── Barve — edini akcent ───────────────────────────────────── */
  /* Modra iz ".si" v uradnem logotipu EPO.si (NE vijolična ikona zraven) —
     znamki lastna barva. Topla nevtralna lestvica zgoraj (namesto
     hladnega SaaS navyja) jo drži na tleh. */
  --accent:         #4a7fe0;  /* 4.75:1 na --bg */
  --accent-strong:  #3866ba;  /* hover/pressed, isti odtenek, temnejši */
  --accent-soft:    rgba(74, 127, 224, 0.12);
  --accent-softer:  rgba(74, 127, 224, 0.06);
  --on-accent:      #fff8f0;  /* besedilo na polni akcentni podlagi */

  /* Gradient — dovoljen SAMO na primarnem gumbu in ambientnem sijaju.
     Dve postaji, isti odtenek (0° razlika), le svetlostna stopnja. */
  --gradient-accent:  linear-gradient(135deg, #4a7fe0 0%, #7ba3ec 100%);
  --gradient-ambient: radial-gradient(circle, rgba(74, 127, 224, 0.16) 0%, transparent 70%);

  /* Lestvica prosojnosti akcenta — 6 stopenj, izpeljanih iz ENE barve.
     Uporabljaj te namesto poljubnih rgba() vrednosti v komponentah. */
  --accent-04: color-mix(in srgb, var(--accent) 4%, transparent);
  --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-45: color-mix(in srgb, var(--accent) 45%, transparent);

  /* Svetlejši odtenek akcenta — za besedilo na temno tonirani
     podlagi (značke), kjer bi poln --accent padel pod 4.5:1. */
  --accent-text-on-tint: #9db8f2; /* ~7:1 na --accent-08/-20 podlagi */

  /* Toplo-bele prosojnosti — samo za nevtralne prekrivke/vnosna polja */
  --overlay-02: rgba(255, 247, 238, 0.02);
  --overlay-04: rgba(255, 247, 238, 0.04);
  --overlay-08: rgba(255, 247, 238, 0.08);
  --overlay-12: rgba(255, 247, 238, 0.12);

  /* Temne prekrivke */
  --scrim:        color-mix(in srgb, var(--bg) 85%, transparent); /* zamegljena glava/meni */
  --modal-scrim:  rgba(13, 9, 6, 0.72);                           /* zaslon za modalom */
  --surface-inset:        rgba(13, 9, 6, 0.20);                   /* vdolbljeni paneli (koda, rezultati) */
  --surface-inset-strong: rgba(13, 9, 6, 0.38);
  --white:        #ffffff;

  /* Nevtralna lestvica na svetlobni podlagi (uporabljena redko, npr. presledki med sekcijami) */
  --surface-wash: color-mix(in srgb, var(--surface) 55%, transparent);

  /* Sistemske barve stanja (obrazci, opozorila, admin značke) — niso znamka */
  --success: #8bab6f;  /* topel žajbelj namesto neonske mentol-zelene */
  --error:   #e0544a;  /* topla, a jasno "rdeča" opozorilna barva */
  --success-04: color-mix(in srgb, var(--success) 4%, transparent);
  --success-08: color-mix(in srgb, var(--success) 8%, transparent);
  --success-12: color-mix(in srgb, var(--success) 12%, transparent);
  --success-20: color-mix(in srgb, var(--success) 20%, transparent);
  --success-30: color-mix(in srgb, var(--success) 30%, transparent);
  --success-45: color-mix(in srgb, var(--success) 45%, transparent);
  --success-soft:   var(--success-12);
  --success-border: var(--success-30);
  --error-04: color-mix(in srgb, var(--error) 4%, transparent);
  --error-08: color-mix(in srgb, var(--error) 8%, transparent);
  --error-12: color-mix(in srgb, var(--error) 12%, transparent);
  --error-20: color-mix(in srgb, var(--error) 20%, transparent);
  --error-30: color-mix(in srgb, var(--error) 30%, transparent);
  --error-45: color-mix(in srgb, var(--error) 45%, transparent);
  --error-soft:   var(--error-12);
  --error-border: var(--error-30);

  /* Admin-only pomožne barve (interno orodje, niso del javne znamke) */
  --admin-sky:      #60a5fa;
  --admin-green:    #10b981;
  --admin-mint:     #b6f0c8;
  --admin-lavender: #c7cdf0;
  --admin-periwinkle: #bcd0ff;
  --admin-pink:     #f472b6;
  --admin-amber:    #fbbf24;
  --admin-red-light: #fca5a5;

  /* ── Tipografija ─────────────────────────────────────────────── */
  /* Naslovna pisava z zaobljenimi potezami — prijazna, topla, še vedno
     ločena od telesa (Inter), da stran ni "en font povsod". */
  --font-heading: 'Quicksand', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;   /* naslovi — Quicksand potrebuje malo več zraka kot serif */
  --leading-snug:    1.3;
  --leading-normal:  1.6;   /* telo */
  --leading-relaxed: 1.75;

  --tracking-tight: 0em;    /* naslovi — zaobljena pisava se ne stiska kot grotesque/serif */
  --tracking-normal: 0;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.12em;  /* eyebrow / label */

  /* Modularna lestvica, razmerje 1.25, fluid clamp() */
  --text-xs:   0.75rem;                                   /* 12px — drobne oznake */
  --text-sm:   0.875rem;                                  /* 14px — pomožno besedilo */
  --text-base: 1rem;                                      /* 16px — telo */
  --text-md:   1.125rem;                                  /* 18px — poudarjen odstavek */
  --text-lg:   clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);    /* h4 / kartice */
  --text-xl:   clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);    /* h3 */
  --text-2xl:  clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);    /* h2 */
  --text-3xl:  clamp(2.25rem, 1.6rem + 2.5vw, 3.25rem);    /* h1 sekundarni */
  --text-4xl:  clamp(2.75rem, 1.7rem + 4vw, 4.5rem);       /* hero h1 */

  /* ── Razmiki — lestvica 4px ──────────────────────────────────── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ── Površine in globina ─────────────────────────────────────── */
  --radius-sm:   10px;  /* gumbi, polja, značke */
  --radius-lg:   20px;  /* kartice, paneli, modali */
  --radius-full: 999px; /* pilule, avatarji */

  --shadow-sm:       0 2px 8px rgba(13, 9, 6, 0.28);
  --shadow-md:       0 8px 24px rgba(13, 9, 6, 0.36);
  --shadow-elevated: 0 12px 32px rgba(13, 9, 6, 0.44);
  --shadow-glow:     0 0 32px rgba(74, 127, 224, 0.22);

  /* ── Gibanje ─────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 400ms;

  /* ── Postavitev ──────────────────────────────────────────────── */
  --header-height: 72px;
  --container-max: 1200px;
}