/* ================================================================
   SicoTrack — tokenii de design (direcția „Dispecerat”)
   ================================================================
   Singura sursă de culori, font, tipografie, spațiere, raze și umbre.
   Valorile și contrastele: `.specs-fire/standards/ui-design.md`, „Direcția aleasă”
   (ui-tokeni, 06.10.2026). Se încarcă ÎNAINTEA oricărui alt CSS, în toate cele
   3 layout-uri (app, auth, superadmin), cu `asset_v()`.

   Partea a doua („Variabilele vechi”) redirecționează numele folosite azi în CSS și
   în view-uri (--primary, --gray-*, --sidebar-*…) spre tokenii noi: tot ce le folosește
   urmează fără să fie atins. Cod nou: doar tokenii semantici din prima parte.
   Dark mode: amânat; numele semantice îl permit fără redenumiri.
   ================================================================ */

/* Overpass variabil (wght 100–900), Fontsource 5.3.0, SIL OFL 1.1 (fonts/OFL-overpass.txt).
   Găzduit local: fără cerere către Google Fonts (GDPR, fără dependență externă).
   Verificat cu fontTools: ș ț Ș Ț cu virgulă, ă â î, „ ”, cifre tabulare (tnum). */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/overpass-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/overpass-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Accent: acțiunea principală, selecția, focusul ─────────────── */
  --accent: #0061a2;
  --accent-700: #004a7c;   /* hover / apăsat */
  --accent-300: #77b0e7;   /* accent pe fundal închis (cadru): 6,95:1 */
  --accent-100: #bedbf8;
  --accent-50: #e4f2ff;    /* nuanța: fundal de selecție; accentul pe ea: 5,71:1 */

  /* ── Suprafețe ──────────────────────────────────────────────────── */
  --page: #f1f5f8;         /* fundalul paginii */
  --surface: #ffffff;      /* card, antet de pagină, panou */
  --surface-2: #f8fafb;    /* antet de tabel, hover de rând */

  /* ── Text ───────────────────────────────────────────────────────── */
  --text: #172128;         /* 16,4:1 pe alb */
  --text-2: #545f68;       /* secundar: 6,5:1 */
  --text-3: #626d75;       /* text de exemplu, subtitluri, etichete slabe: 4,83 pe pagină, 5,3 pe alb (#6b767e din prototip: 4,24 pe pagină, sub prag) */

  /* ── Borduri ────────────────────────────────────────────────────── */
  --border: #dfe6e9;          /* chenar de card (decorativ) */
  --border-subtle: #edf1f3;   /* separator de rând */
  --border-control: #848f97;  /* chenar de câmp / buton secundar: 3,3:1 (minim 3:1 pentru controale) */

  /* ── Stări: text (fg) pe fundal (bg); contrastul fg/bg ≥ 5,1:1 ──── */
  --danger-fg: #ac1a1c;  --danger-bg: #ffeeee;   /* expirat, eroare */
  --warning-fg: #9a5505; --warning-bg: #fff2dc;  /* în curând, avertizare */
  --success-fg: #1b6c3a; --success-bg: #e5faea;  /* ok */
  --info-fg: #125f94;    --info-bg: #e5f4ff;     /* informație, în desfășurare */
  --neutral-fg: #545f68; --neutral-bg: #eef2f4;

  /* ── Cadrul aplicației (meniul lateral) ─────────────────────────── */
  --frame: #142332;
  --frame-hover: #1d3044;
  --frame-active: #23384c;   /* elementul activ, cu text alb: 12,1:1 */
  --frame-text: #d0d8e1;     /* 11,1:1 */
  --frame-text-2: #a9b7c6;   /* 7,8:1 */
  --frame-label: #94a6b8;    /* etichete de grup: 6,4:1 */
  --frame-border: #2c4359;
  --overlay: rgb(20 35 50 / 0.45);   /* fundalul de sub meniul mobil, panoul AI și modaluri */

  /* ── Grafice (ui-dashboard): serii distincte, nu culori de stare; Chart.js le citește din CSS ── */
  --chart-1: var(--accent);   /* prima serie (ex. venituri) */
  --chart-2: #c25e0a;         /* a doua serie (ex. cheltuieli): 4,29:1 pe alb, distinctă de accent și pentru daltonism */
  --chart-grid: var(--border-subtle);

  /* ── Elemente de domeniu ────────────────────────────────────────── */
  --plate-eu: #072c99;       /* banda UE a plăcuței, cu text alb: 11,5:1 */

  /* ── Tipografie ─────────────────────────────────────────────────── */
  --font-sans: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;  /* chei, căi, formule (SuperAdmin) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* text */
  --fs-16: 16px;   /* titlu de card */
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-26: 26px;   /* titlu de pagină */
  --fs-28: 28px;   /* cifra unui indicator */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --num: tabular-nums;   /* font-variant-numeric pentru cifre în coloane */

  /* ── Spațiere (pas de 4 px) ─────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-12: 48px;

  /* ── Iconițe (<x-icon>, size="sm|md|lg|xl") ────────────────────── */
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  /* ── Înălțimea controalelor (ui-cons-dimensiuni, 15.10.2026, aprobat): butoane, câmpuri, select-uri, date ──
     Înainte ieșea din padding + text: același buton în 3 înălțimi, câmpurile 37–43px. Pe telefon ambele cresc la
     --h-touch (redefinite în media query-ul de la finalul fișierului). */
  --h-control: 36px;
  --h-control-sm: 30px;
  --h-touch: 44px;
  /* antetul: o bară compactă, toate controalele la aceeași înălțime, pe orice ecran (la 375px, 6 controale de 44px nu
     încap pe lățime) */
  --h-header-control: 34px;

  /* ── Raze ───────────────────────────────────────────────────────── */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-plate: 5px;
  --radius-pill: 999px;

  /* ── Umbre: 3 niveluri (card / meniu derulant, hover / panou, modal) ─ */
  --shadow-1: 0 1px 2px rgb(23 33 40 / 0.05), 0 1px 3px rgb(23 33 40 / 0.06);
  --shadow-2: 0 2px 6px rgb(23 33 40 / 0.08);
  --shadow-3: 0 8px 24px rgb(23 33 40 / 0.12), 0 2px 6px rgb(23 33 40 / 0.06);

  /* ── Mișcare: doar pentru schimbări de stare ────────────────────── */
  --t: 150ms cubic-bezier(0.25, 0, 0.3, 1);
  --t-slow: 250ms cubic-bezier(0.25, 0, 0.3, 1);

  /* ── Straturi ───────────────────────────────────────────────────── */
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-toast: 1300;

  /* ================================================================
     Variabilele vechi, redirecționate (nu se folosesc în cod nou)
     ================================================================ */
  --primary: var(--accent);
  --primary-hover: var(--accent-700);
  --primary-light: var(--accent-50);
  --primary-muted: color-mix(in srgb, var(--accent) 12%, transparent);

  --success: var(--success-fg);
  --success-light: var(--success-bg);
  --warning: var(--warning-fg);
  --warning-light: var(--warning-bg);
  --danger: var(--danger-fg);
  --danger-light: var(--danger-bg);
  --info: var(--info-fg);
  --info-light: var(--info-bg);

  /* scara neutră nouă (nuanță rece, 230–250°) în locul slate-ului Tailwind */
  --gray-50: var(--surface-2);
  --gray-100: var(--page);
  --gray-200: var(--border);
  --gray-300: #cdd6db;
  --gray-400: #8a959d;
  --gray-500: var(--text-3);
  --gray-600: var(--text-2);
  --gray-700: #3c4851;
  --gray-800: #263038;
  --gray-900: var(--text);

  --sidebar-bg: var(--frame);
  --sidebar-width: 248px;   /* ca în prototip (ui-shell) */
  --sidebar-hover: var(--frame-hover);
  --sidebar-active-bg: var(--frame-active);
  --sidebar-active-border: var(--frame-active);   /* fără bordură colorată (anti-tipar); folosit doar de paginile vechi */
  --sidebar-text: var(--frame-text);
  --sidebar-text-active: #ffffff;

  --header-h: 64px;   /* antetul alb (ui-shell); curse/form îl folosește pentru panoul lipicios */
  --content-bg: var(--page);

  --card-bg: var(--surface);
  --card-radius: var(--radius-card);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);

  --font: var(--font-sans);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);   /* era #94a3b8: 2,6:1 pe alb, sub prag */

  --r-sm: 6px;
  --r: var(--radius-control);
  --r-md: 10px;
  --r-lg: var(--radius-card);
  --r-xl: 16px;
  --r-full: var(--radius-pill);
}

/* Pe telefon, controalele normale și mici au aceeași țintă de atingere (44px, aprobat 15.10.2026) */
@media (max-width: 768px) {
  :root { --h-control: var(--h-touch); --h-control-sm: var(--h-touch); }
}