/* ═══════════════════════════════════════════════════════════════════════════
 * ATH — tokenii de design comuni ecosistemului (sursă unică)
 * Extrași din ATH | RATING (referința), valori REZOLVATE din CSS-ul livrat
 * (docroot rating.nineinternational.ro, index-CqMhzArJ.css) și măsurate în
 * browser la 12 oct 2026. Vezi SPEC-RATING.md pentru cum se folosesc.
 *
 * Se importă în orice aplicație (Jinja <link>, Vite `import`, Next globals).
 * Nu depinde de Tailwind. Toate numele încep cu --ath-.
 *
 * Fonturile NU sunt încărcate de fișierul acesta: fiecare aplicație le
 * găzduiește LOCAL (nu fonts.googleapis.com — trimite IP-ul vizitatorilor la
 * Google). Sursa fișierelor woff2: RATING/.../frontend/dist/fonts/ (latin +
 * latin-ext ajung pentru română).
 *
 * Praguri responsive (variabilele CSS NU merg în @media — scrie-le literal):
 *   sm 640px · md 768px · lg 1024px (bara laterală fixă vs. sertar) · xl 1280px
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Culori de bază (shadcn-HSL din RATING, rezolvate) ── */
  --ath-bg-page:            #f2f2f8;   /* --background 244 32% 96%  (body) */
  --ath-bg-content-grad:    linear-gradient(to bottom right, #f3f0ff, rgba(238,246,255,.6), rgba(233,226,255,.5)); /* zona de conținut */
  --ath-bg-card:            #ffffff;   /* --card */
  --ath-bg-card-grad:       linear-gradient(180deg, #ffffff 0%, #ededf2 100%); /* .card-cosmic */
  --ath-bg-popover:         #ffffff;
  --ath-bg-secondary:       #ededf2;   /* --secondary 240 15% 94% */
  --ath-bg-muted:           #eeedf2;   /* --muted 245 15% 94% */
  --ath-bg-subtle:          #f8fafc;   /* slate-50: hover rând/buton contur */
  --ath-bg-accent-soft:     #f3f0ff;   /* nebula-50: selecție, hover accent */
  --ath-bg-thead:           rgba(243,240,255,.3);

  /* Cadru: bara laterală + bara de sus = ACEEAȘI suprafață bleumarin */
  --ath-nav-grad:           linear-gradient(135deg, #3d62ab 0%, #17305c 100%);
  --ath-nav-start:          #3d62ab;
  --ath-nav-end:            #17305c;
  --ath-sidebar-border:     #2a4a82;   /* border-right 1px */
  --ath-topbar-border:      rgba(255,255,255,.10); /* border-bottom 1px */
  --ath-topbar-line:        linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #14b8a6 100%); /* 2px sus, opacitate .30 */
  --ath-on-nav:             #ffffff;
  --ath-on-nav-95:          rgba(255,255,255,.95); /* text item meniu */
  --ath-on-nav-85:          rgba(255,255,255,.85); /* pictogramă item meniu */
  --ath-on-nav-80:          rgba(255,255,255,.80); /* buton Aplicațiile ATH */
  --ath-on-nav-70:          rgba(255,255,255,.70); /* hamburger */
  --ath-on-nav-60:          rgba(255,255,255,.60); /* buton pliere */
  --ath-on-nav-50:          rgba(255,255,255,.50); /* subtitluri în bare */
  --ath-on-nav-40:          rgba(255,255,255,.40); /* copyright, eticheta „ATH APPS" */
  --ath-on-nav-30:          rgba(255,255,255,.30); /* item „În curând" */
  --ath-on-nav-hover-bg:    rgba(255,255,255,.10);
  --ath-on-nav-divider:     rgba(255,255,255,.15);
  --ath-overlay-drawer:     rgba(30,27,75,.30);    /* void #1e1b4b /30 + blur 4px */
  --ath-overlay-modal:      rgba(0,0,0,.40);       /* + blur 4px */

  /* ── Text ── */
  --ath-text:               #181528;   /* --foreground 250 30% 12% */
  --ath-text-strong:        #1e293b;   /* slate-800: titluri modal/card, valori */
  --ath-text-heading-2:     #334155;   /* slate-700: titluri de card/tabel */
  --ath-text-secondary:     #64748b;   /* slate-500 */
  /* Textul estompat (etichete, cap de tabel, subtitluri, ajutor) — UNIFICAT în toate 5 aplicațiile
     (decizia din 12 oct 2026): #6b677e = --muted-foreground al RATING, 5,4:1 pe alb. RATING folosea
     slate-400 (#94a3b8), doar 2,56:1 — sub pragul de 3:1. #94a3b8 rămâne DOAR pentru borduri,
     pictograme decorative și axe de grafic (--ath-icon-muted), niciodată pentru text. */
  --ath-text-muted:         #6b677e;   /* = --ath-text-muted-fg */
  --ath-icon-muted:         #94a3b8;   /* slate-400: pictograme decorative, axe, borduri — NU text */
  --ath-text-faint:         #cbd5e1;   /* slate-300: pictograme stare goală */
  --ath-text-muted-fg:      #6b677e;   /* --muted-foreground 250 10% 45% */

  /* ── Borduri ── */
  --ath-border:             #dcdae7;   /* --border/--input 250 20% 88% (implicit pe *) */
  --ath-border-neutral:     #e2e8f0;   /* slate-200: carduri simple, modal, dropdown, tab-uri */
  --ath-border-light:       #f1f5f9;   /* slate-100: separatoare interne */
  --ath-border-accent:      #d4c6ff;   /* nebula-200: butoane contur accent */

  /* ── Accent / primar ── */
  --ath-primary:            #7c2bee;   /* --primary 265 85% 55% (ring, focus, nav activ) */
  --ath-primary-600:        #7c3aed;   /* nebula-500 — cel mai folosit „violet" plin */
  --ath-primary-hover:      #6d28d9;   /* nebula-600 */
  --ath-primary-active:     #5b21b6;   /* nebula-700 */
  --ath-primary-400:        #9461ff;
  --ath-primary-300:        #b69aff;
  --ath-primary-200:        #d4c6ff;
  --ath-primary-100:        #e9e2ff;
  --ath-primary-50:         #f3f0ff;
  --ath-on-primary:         #ffffff;
  --ath-blue:               #2a6df4;   /* nebula-mid 220 90% 56% */
  --ath-cyan:               #17bfcf;   /* nebula-end 185 80% 45% */
  --ath-grad-primary:       linear-gradient(135deg, #7c2bee 0%, #2a6df4 100%); /* buton primar, item activ */
  --ath-grad-nebula:        linear-gradient(135deg, #7c2bee 0%, #2a6df4 50%, #17bfcf 100%); /* text titlu, bara card */
  --ath-grad-dragon:        linear-gradient(135deg, #dc2626 0%, #f97316 50%, #f59e0b 100%); /* avatar fără poză */
  --ath-grad-underline:     linear-gradient(90deg, #7c2bee 0%, #f9561f 50%, #fac938 100%); /* sub titlul paginii */

  /* ── Stări (semantice) ── */
  /* Textul de stare pe alb: verde #15803d (5,0:1), galben #a16207 (4,9:1) — nu #22c55e/#eab308 ca text. */
  --ath-success:            #22c55e;  --ath-success-bg: #dcfce7;  --ath-success-text: #15803d;
  --ath-warning:            #eab308;  --ath-warning-bg: #fef9c3;  --ath-warning-text: #a16207;
  --ath-danger:             #ef4444;  --ath-danger-bg:  #fee2e2;  --ath-danger-text:  #b91c1c;
  --ath-info:               #3b82f6;  --ath-info-bg:    #dbeafe;  --ath-info-text:    #1d4ed8;
  --ath-neutral-bg:         #f1f5f9;  --ath-neutral-text: #64748b;
  --ath-destructive:        #f44725;   /* --destructive 10 90% 55% */
  --ath-rose:               #f43f5e;   /* contor notificări, buton pericol */
  --ath-rose-hover:         #e11d48;
  --ath-orange:             #f97316;   /* contor alerte în meniu (dragon-500) */
  --ath-banner-warn-bg:     rgba(255,251,235,.8);  --ath-banner-warn-border: rgba(252,211,77,.6); --ath-banner-warn-text: #92400e;
  --ath-banner-info-bg:     rgba(243,240,255,.7);  --ath-banner-info-border: #d4c6ff;
  --ath-banner-err-bg:      #fff1f2;               --ath-banner-err-border:  #fecdd3;            --ath-banner-err-text:  #be123c;
  /* Scara de risc / ESG (funcționale, nu decorative) */
  --ath-risk-a: #22c55e; --ath-risk-b: #84cc16; --ath-risk-c: #eab308; --ath-risk-d: #f97316; --ath-risk-e: #ef4444;
  --ath-esg-e:  #10b981; --ath-esg-s:  #3b82f6; --ath-esg-g:  #8b5cf6;

  /* ── Focus ── */
  --ath-focus-ring:         0 0 0 3px rgba(124,43,238,.12), 0 0 20px rgba(124,43,238,.06); /* câmpuri: + border --ath-primary */
  --ath-focus-ring-strong:  0 0 0 2px #ffffff, 0 0 0 4px #9461ff; /* comutatoare (ring-2 nebula-400, offset 2) */
  --ath-focus-ring-on-nav:  0 0 0 2px rgba(255,255,255,.6);       /* butoane pe bara bleumarin */

  /* ── Tipografie ── */
  --ath-font-body:          "Exo 2", "Inter", system-ui, sans-serif;  /* body, câmpuri */
  --ath-font-heading:       "Orbitron", "Exo 2", "Inter", sans-serif; /* h1–h6, titluri, valori KPI */
  --ath-font-ui:            "Inter", sans-serif;  /* meniu, etichete, cap tabel, butoane (font-rajdhani = Inter!) */
  --ath-font-mono:          ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ath-heading-tracking:   .02em;
  --ath-label-tracking:     .05em;   /* tracking-wider */
  --ath-btn-tracking:       .08em;   /* buton primar, uppercase */

  /* mărimi (font-size / line-height) */
  --ath-fs-page-title:      24px;  --ath-lh-page-title:  32px;  /* h1 în pagină, Orbitron 700 */
  --ath-fs-page-title-lg:   30px;  --ath-lh-page-title-lg: 36px; /* h1 în bannerele „hero" (≥1024) */
  --ath-fs-topbar-title:    18px;  --ath-lh-topbar-title: 28px; /* titlul din bara de sus, Inter 700 (16px <640) */
  --ath-fs-h2:              20px;  --ath-lh-h2: 28px;           /* titlu card de autentificare, Orbitron 700 */
  --ath-fs-h3:              18px;  --ath-lh-h3: 28px;           /* titlu modal, Orbitron 700 */
  --ath-fs-h4:              14px;  --ath-lh-h4: 20px;           /* titlu card/tabel, Orbitron 600 */
  --ath-fs-kpi:             30px;  --ath-lh-kpi: 36px;          /* valoare KPI, Orbitron 700 */
  --ath-fs-body:            16px;  --ath-lh-body: 24px;
  --ath-fs-sm:              14px;  --ath-lh-sm: 20px;           /* tabele, câmpuri, butoane */
  --ath-fs-nav:             13px;  --ath-lh-nav: 19.5px;        /* item meniu, Inter 500 */
  --ath-fs-xs:              12px;  --ath-lh-xs: 16px;           /* etichete, insigne */
  --ath-fs-label:           11px;  --ath-lh-label: 16.5px;      /* etichete formular (login), Inter 700 uppercase */
  --ath-fs-micro:           10px;
  --ath-fs-nano:            8px;                                /* „SOON", „ATH APPS" */

  /* ── Raze ── (RATING: --radius .75rem ⇒ rounded-lg 12 / md 10 / sm 8) */
  --ath-radius-xs:          4px;
  --ath-radius-sm:          8px;
  --ath-radius-md:          10px;   /* butoane mici (Suport/Ticket, „Sync") */
  --ath-radius:             12px;   /* implicit: butoane, câmpuri, item meniu, carduri .card-cosmic, tab-uri */
  --ath-radius-lg:          16px;   /* modal, dropdown, carduri simple (rounded-2xl) */
  --ath-radius-xl:          24px;   /* cardul de autentificare */
  --ath-radius-full:        9999px; /* insigne, pastile */

  /* ── Umbre ── */
  --ath-shadow-xs:          0 1px 2px rgba(0,0,0,.05);
  --ath-shadow-md:          0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --ath-shadow-card:        0 2px 4px rgba(41,88,163,.08), 0 4px 16px rgba(41,88,163,.12);
  --ath-shadow-card-hover:  0 0 20px rgba(124,43,238,.08), 0 8px 32px rgba(24,21,40,.06);
  --ath-shadow-popover:     0 25px 50px -12px rgba(0,0,0,.25);  /* modal, dropdown (shadow-2xl) */
  --ath-shadow-auth:        0 0 40px rgba(124,58,237,.15), 0 8px 32px rgba(0,0,0,.08); /* cosmic-lg */
  --ath-shadow-btn:         0 0 20px rgba(124,43,238,.20);
  --ath-shadow-btn-hover:   0 0 30px rgba(124,43,238,.35), 0 0 60px rgba(42,109,244,.15);
  --ath-shadow-nav-active:  0 0 15px rgba(124,43,238,.25);
  --ath-shadow-toast:       0 4px 12px rgba(0,0,0,.10);

  /* ── Spațieri & dimensiuni de cadru ── */
  --ath-space-1: 4px; --ath-space-2: 8px; --ath-space-3: 12px; --ath-space-4: 16px;
  --ath-space-5: 20px; --ath-space-6: 24px; --ath-space-8: 32px; --ath-space-10: 40px; --ath-space-12: 48px;
  --ath-topbar-h:           64px;
  --ath-topbar-px:          24px;   /* 16px sub 768 */
  --ath-sidebar-w:          256px;
  --ath-sidebar-w-collapsed:72px;
  --ath-sidebar-logo-h:     64px;
  --ath-nav-px:             10px;   /* padding orizontal al listei */
  --ath-nav-py:             12px;
  --ath-nav-item-h:         31.5px; /* 6px + 19.5px + 6px */
  --ath-nav-item-px:        10px;
  --ath-nav-item-gap:       10px;   /* pictogramă ↔ text */
  --ath-nav-item-spacing:   2px;    /* între item-uri (space-y-0.5) */
  --ath-nav-icon:           17px;
  --ath-content-p:          24px;   /* 16px sub 768 */
  --ath-control-h:          46px;   /* câmp input-scifi */
  --ath-btn-h:              48px;   /* buton primar implicit (12px+24px+12px) */
  --ath-icon-btn:           36px;   /* butoanele din bara de sus */
  --ath-modal-w:            448px;  /* max-w-md; 512px pt. max-w-lg */
  --ath-dropdown-w:         352px;  /* notificări (22rem); comutatorul de aplicații: 288px */

  /* ── Straturi ── */
  --ath-z-sticky:           10;
  --ath-z-topbar:           30;
  --ath-z-drawer-overlay:   40;
  --ath-z-sidebar:          50;
  --ath-z-dropdown:         50;
  --ath-z-modal:            50;

  /* ── Tranziții ── */
  --ath-ease:               cubic-bezier(.4,0,.2,1);
  --ath-dur-fast:           150ms;  /* culori, hover butoane, scale 1.1 */
  --ath-dur-nav:            200ms;  /* item meniu */
  --ath-dur-panel:          300ms;  /* lățime bară laterală, sertar, câmpuri, buton primar */
  --ath-dur-card:           400ms;  /* card hover (ridicare 2px) */
  /* intrarea paginii (framer-motion): opacity 0→1, translateY 12px→0, 200ms ease-in-out; ieșire -12px */
}

/* ═══ Tema întunecată ═══════════════════════════════════════════════════════
 * ATENȚIE: în RATING tema întunecată e DEZACTIVATĂ (store/theme.ts scoate clasa
 * `dark` la pornire; comutatorul e ascuns — finding H30). Valorile de mai jos
 * sunt cele DEFINITE în index.css (.dark), păstrate pentru când se reactivează.
 * Bara laterală și bara de sus NU se schimbă cu tema (rămân bleumarin).
 * Panoul „Aplicațiile ATH" rămâne MEREU deschis la culoare.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"], :root.dark {
  --ath-bg-page:        #111117;   /* 240 15% 8% */
  --ath-bg-card:        #1b1b22;   /* 240 12% 12% */
  --ath-bg-card-grad:   linear-gradient(180deg, #1b1b22 0%, #24242e 100%);
  --ath-bg-popover:     #1b1b22;
  --ath-bg-secondary:   #24242e;   /* 240 12% 16% */
  --ath-bg-muted:       #282833;   /* 240 12% 18% */
  --ath-text:           #e2e4e9;   /* 220 15% 90% */
  --ath-text-muted-fg:  #8b91a1;   /* 220 10% 55% */
  --ath-text-muted:     #8b91a1;   /* textul estompat urmează --ath-text-muted-fg și pe tema întunecată */
  --ath-border:         #2d2d39;   /* 240 12% 20% */
  --ath-primary:        #995af2;   /* 265 85% 65% */
  --ath-destructive:    #ee4b2b;
}