/* ============================================================================
   _tokens.css — singurul loc în care se definesc valorile de design.

   DE CE EXISTĂ
   Înainte, cele 43 de variabile stăteau în site.css, dar restul foilor de stil
   scriau culorile direct: 251 de valori hexazecimale, 58 distincte, împrăștiate
   în 12 fișiere. Nu era neglijență — pur și simplu setul de variabile acoperea
   culorile de brand și nu acoperea deloc NUANȚELE DE STARE: fundalul unui badge
   verde, marginea unei pastile de avertizare, textul unui mesaj de eroare.
   Neavând token, fiecare pagină și-a alcătuit propria nuanță, iar aceeași stare
   a ajuns să arate diferit de la un ecran la altul.

   Scările de mai jos sunt construite din valorile EFECTIV folosite în proiect,
   nu inventate: migrarea nu schimbă nicio culoare pe ecran, doar îi dă un nume.

   CUM SE ÎNCARCĂ
   Prima foaie de stil, înaintea tuturor celorlalte, în _Layout, _LayoutBare și
   _LayoutMicrosite. O variabilă CSS trebuie declarată înainte de a fi citită.

   CELE DOUĂ IDENTITĂȚI
   Portalul (Director, Admin) și microsite-ul unei școli NU arată la fel, și e
   intenționat. Portalul e un instrument de căutare: albastru, aerisit, Plus
   Jakarta Sans. Microsite-ul e site-ul propriu al unei instituții: sobru, cu
   serif pe titluri, iar cele două culori de accent vin din baza de date, per
   școală — SetariPunctEducational_TD.tCuloarePrincipala și tCuloareSecundara.
   Valorile din --ms-* de mai jos sunt implicitul, folosit de școlile care nu
   și-au setat culorile.
   ============================================================================ */

:root {

    /* ---------- Portal: culori de brand ---------- */
    --er-color-primary: #0F4C81;
    --er-color-primary-deep: #0A3B66;
    --er-color-secondary: #2563EB;
    --er-color-secondary-hover: #1D4ED8;
    --er-color-accent: #F5B82E;
    --er-color-accent-hover: #E0A41C;
    --er-color-accent-deep: #B98613;

    /* ---------- Semnificații de stare, valoarea de bază ---------- */
    --er-color-success: #10B981;
    --er-color-danger: #DC2626;
    --er-color-warning: #F59E0B;

    /* ----------------------------------------------------------------
       Scările de stare, câte patru trepte.

       Convenția, aceeași pentru toate familiile:
         -surface  fundalul pastilei sau al bandoului
         -border   marginea ei
         -text     textul scris pe acel fundal, cu contrast suficient
         -strong   varianta plină, pentru pictograme și accente

       Numele spun ROLUL, nu culoarea: „info", nu „albastru". Altfel, ziua în
       care informativul devine indigo, tokenul ar minți.
       ---------------------------------------------------------------- */

    /* Informativ — folosit pentru niveluri de învățământ, etichete neutre */
    --er-info-surface: #DBEAFE;
    --er-info-surface-soft: #EFF6FF;
    --er-info-surface-alt: #EBF1FB;
    --er-info-border: #BFDBFE;
    --er-info-border-soft: #DEEAFC;
    --er-info-text: #1E40AF;
    --er-info-strong: #2563EB;

    /* Reușită, disponibil, activ */
    --er-success-surface: #D1FAE5;
    --er-success-surface-soft: #F0FDF4;
    --er-success-border: #A7F3D0;
    --er-success-border-soft: #BBF7D0;
    --er-success-text: #047857;
    --er-success-strong: #059669;
    --er-success-deep: #0B8F63;

    /* Atenție, în așteptare, aproape plin */
    --er-warning-surface: #FEF3C7;
    --er-warning-border: #FDE68A;
    --er-warning-text: #92400E;
    --er-warning-strong: #D97706;
    --er-warning-ink: #3A2A00;

    /* Eroare, plin, dezactivat */
    --er-danger-surface: #FEF2F2;
    --er-danger-surface-alt: #FEE2E2;
    --er-danger-border: #FECACA;
    --er-danger-text: #991B1B;
    --er-danger-strong: #B91C1C;

    /* Accent secundar, pentru categorii care nu sunt stări */
    --er-pink-surface: #FCE7F3;
    --er-pink-border: #FBCFE8;
    --er-pink-text: #9D174D;

    /* Încă două accente de categorie, cerute de panoul de conținut: acolo se
       deosebesc peste douăzeci de secțiuni, iar cu cinci culori jumătate ar fi
       arătat identic. NU sunt stări — nu spun „bine" sau „atenție" — deci nu se
       folosesc pentru mesaje. */
    --er-violet-surface: #EDE9FE;
    --er-violet-border: #DDD6FE;
    --er-violet-text: #5B21B6;

    --er-teal-surface: #CCFBF1;
    --er-teal-border: #99F6E4;
    --er-teal-text: #0F766E;

    /* ---------- Categorii de instituții ---------- */
    /* Aceleași trei culori și pe hartă, și pe carduri, și în legendă */
    --er-color-school: #2563EB;
    --er-color-kindergarten: #F5B82E;
    --er-color-afterschool: #10B981;

    /* ---------- Text ---------- */
    --er-text-heading: #0F4C81;
    --er-text-main: #1A1F36;
    --er-text-soft: #475569;
    --er-text-muted: #64748B;
    --er-text-faint: #94A3B8;
    --er-text-on-dark: #FFFFFF;
    --er-text-on-dark-soft: rgba(255, 255, 255, 0.85);

    /* ---------- Fundaluri și margini ---------- */
    --er-bg-page: #F8FAFC;
    --er-bg-surface: #FFFFFF;
    --er-bg-muted: #EEF2F7;
    --er-bg-muted-soft: #F1F5F9;
    --er-bg-muted-warm: #F9FAFB;
    --er-bg-tint: #EFF4FA;
    --er-bg-footer: #0A1A2E;

    --er-border: #E2E8F0;
    --er-border-strong: #CBD5E1;
    --er-border-soft: #DBE3EE;
    --er-border-faint: #DDE5ED;
    --er-border-neutral: #D1D5DB;
    --er-border-plain: #E0E0E0;

    /* ----------------------------------------------------------------
       Culori ale altor firme. Stau separat, cu numele lor, fiindcă NU sunt
       ale noastre și nu se schimbă când se schimbă paleta: sunt impuse de
       Google și de rețelele sociale, iar modificarea lor ar face butoanele
       nerecunoscibile.
       ---------------------------------------------------------------- */
    --er-brand-google-albastru: #4285F4;
    --er-brand-google-verde: #34A853;
    --er-brand-social-albastru: #1F8AFE;
    --er-brand-social-bleu: #33CCFF;

    /* ---------- Umbre ---------- */
    --er-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04);
    --er-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06);
    --er-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);
    --er-shadow-xl: 0 20px 50px rgba(15, 23, 42, 0.12);

    /* ---------- Rotunjiri ---------- */
    --er-radius-sm: 8px;
    --er-radius-md: 12px;
    --er-radius-lg: 20px;
    --er-radius-xl: 28px;
    --er-radius-full: 999px;

    /* ---------- Spațiere ---------- */
    --er-space-xs: 4px;
    --er-space-sm: 8px;
    --er-space-md: 16px;
    --er-space-lg: 24px;
    --er-space-xl: 40px;
    --er-space-2xl: 64px;
    --er-space-3xl: 100px;

    /* ---------- Tranziții și lățimi ---------- */
    --er-transition: all 0.2s ease;
    --er-transition-slow: all 0.3s ease;
    --er-container-max: 1280px;

    /* ---------- Familii de litere ---------- */
    --er-font-portal: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;


    /* ================================================================
       MICROSITE — identitatea site-ului unei școli.

       Implicitul e paleta din mockup-ul de referință: bleumarin instituțional,
       auriu, hârtie caldă. Sobru intenționat — un liceu nu e o aplicație.

       Cele două culori de accent, --ms-accent și --ms-accent-2, sunt SINGURELE
       pe care le rescrie școala din panoul de administrare. Restul, hârtia și
       cerneala, rămân comune: dacă ar fi fost și ele configurabile, o alegere
       nefericită ar fi putut face textul ilizibil, iar platforma răspunde
       pentru lizibilitatea paginilor pe care le găzduiește.
       ================================================================ */

    --ms-accent: #16213E;
    --ms-accent-dark: #0B111F;
    --ms-accent-soft: #233258;
    --ms-accent-2: #C9A227;
    --ms-accent-2-light: #E7C766;

    --ms-paper: #EEF1F6;
    --ms-paper-warm: #F6F4EC;
    --ms-surface: #FFFFFF;

    --ms-ink: #1A1E2B;
    --ms-ink-soft: #4A5164;

    --ms-calm: #5C7A5E;
    --ms-calm-light: #DCE6DD;
    --ms-urgent: #B23A2E;

    --ms-line: rgba(22, 33, 62, 0.12);
    --ms-radius: 2px;

    --ms-font-titlu: 'Fraunces', Georgia, 'Times New Roman', serif;
    --ms-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ms-font-cifre: 'IBM Plex Mono', 'Consolas', monospace;

    /* Scara de litere a microsite-ului. Titlurile cresc mai repede decât textul,
       ca ierarhia să se vadă și pe un ecran de telefon. */
    --ms-text-sm: 0.875rem;
    --ms-text-base: 1rem;
    --ms-text-lg: 1.125rem;
    --ms-titlu-sm: 1.375rem;
    --ms-titlu-md: 1.875rem;
    --ms-titlu-lg: 2.5rem;
    --ms-titlu-xl: 3.25rem;
}


/* ============================================================================
   MOD DE CONTRAST RIDICAT

   Cerut de document la capitolul de accesibilitate, și are suport în bază:
   SetariPunctEducational_TD.bAfiseazaBaraAccesibilitate spune dacă bara de
   comutare se afișează pe microsite-ul respectiv.

   Se face prin rescrierea variabilelor, nu prin reguli noi. Motivul e practic:
   altfel ar fi trebuit dublată fiecare regulă de culoare din tot proiectul, iar
   orice regulă adăugată ulterior ar fi rămas în afara modului de contrast, fără
   ca nimeni să observe. Așa, o pagină nouă îl primește automat.

   Alb pur pe negru pur, cu margini vizibile: raportul de contrast maxim, cerut
   de utilizatorii cu vedere slabă. Culorile de accent NU se păstrează — tocmai
   ele sunt cele care scad contrastul.
   ============================================================================ */

body.er-a11y-contrast {
    --ms-paper: #FFFFFF;
    --ms-paper-warm: #FFFFFF;
    --ms-surface: #FFFFFF;
    --ms-ink: #000000;
    --ms-ink-soft: #000000;
    --ms-line: rgba(0, 0, 0, 0.35);
    --ms-accent: #000000;
    --ms-accent-dark: #000000;
    --ms-accent-soft: #000000;
    --ms-accent-2: #000000;
    --ms-accent-2-light: #FFFFFF;
    --ms-calm: #000000;
    --ms-calm-light: #FFFFFF;
    --ms-urgent: #000000;

    --er-bg-page: #FFFFFF;
    --er-bg-surface: #FFFFFF;
    --er-bg-muted: #FFFFFF;
    --er-text-main: #000000;
    --er-text-soft: #000000;
    --er-text-muted: #000000;
    --er-text-heading: #000000;
    --er-border: rgba(0, 0, 0, 0.35);
    --er-border-strong: #000000;
}

/* În contrast ridicat, umbrele nu mai comunică nimic — separarea o fac
   marginile. Lăsate, ar fi doar înnegrit zonele din jurul cardurilor. */
body.er-a11y-contrast * {
    box-shadow: none !important;
    text-shadow: none !important;
}


/* ============================================================================
   MĂRIREA LITERELOR

   Al doilea comutator al barei de accesibilitate. Se schimbă dimensiunea de
   bază a rădăcinii, iar tot ce e scris în rem crește proporțional — de aceea
   scara de litere a microsite-ului e în rem și nu în pixeli.
   ============================================================================ */

body.er-a11y-text-mare {
    font-size: 112.5%;
}

body.er-a11y-text-foarte-mare {
    font-size: 125%;
}


/* ============================================================================
   PREFERINȚA DE MIȘCARE REDUSĂ

   Cine a cerut din sistemul de operare mai puțină mișcare nu trebuie să
   primească animații de la noi. Contoarele animate din prima pagină a
   microsite-ului sar direct la valoarea finală.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}