/* ══════════════════════════════════════════════════════════════════════════
   RePatriot 2.0 · tokeni de design
   Se încarcă în base.html.twig
   ÎNAINTEA oricărei componente.

   Regula pe care o verifică review-ul: componentele NU ating niciodată tokenii
   de brand (--rp-*). .c-button--primary citește --color-action, nu --rp-magenta.
   Dacă un token cu text deasupra citește --color-brand-magenta, e o eroare.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paletă de brand (nu se folosesc direct în componente) ─────────────── */
  --rp-magenta: #EF3C6A;
  --rp-blue-dark: #203987;
  --rp-yellow: #FCB037;
  --rp-blue: #0472B9;
  --rp-red: #BF292C;          /* logo + acțiunea principală (decizia din 25.09.2026) */
  --rp-orange: #EF7E34;
  --rp-yellow-light: #FFD059;
  --rp-grey-light: #B2B8C4;
  --rp-violet: #684199;
  /* Nu e în brandbook: fundal de hartă, unde uscatul are nevoie de un
     bleumarin mai adânc decât #203987 ca pin-urile să se desprindă. */
  --rp-navy-deep: #0B1B33;

  /* ── Logotip ───────────────────────────────────────────────────────────
     Brand Guide, „The Logo": „re" roșu, triunghiul galben, „patriot"
     albastru. Varianta monocromă e albă, pe fond închis. Sunt singurele
     locuri unde culorile de brand se folosesc ca atare. */
  --color-logo-re: #BF292C;
  --color-logo-mark: #FCB037;
  --color-logo-patriot: #0472B9;

  /* ── Magenta: DOUĂ valori, DOUĂ roluri ────────────────────────────────── */
  --color-brand-magenta: #EF3C6A;   /* alb pe el 3,79:1 */
  /* DA: display >24px, blocuri de accent, pin-uri de hartă,                  */
  /*     borduri, indicatori fără text, grafică de brand                      */
  /* NU: fundal de buton, badge cu text mic, link în text                     */
  /* Acțiunea principală e ROȘUL de brand, ca în machetele homepage-ului și
     în brandbook (culoare primară). Decizia clientului, 25.09.2026. */
  --color-action: #BF292C;          /* alb pe el 5,88:1 · AA ✓ */
  --color-action-hover: #9E2226;    /* alb 7,75:1 */
  --color-action-active: #7F1B1E;
  --color-action-subtle: #FBEAEA;
  --color-action-on-subtle: #8F1D20; /* 7,64:1 pe #FBEAEA · AA ✓ */
  --color-action-fg: #FFFFFF;
  --color-link: #BF292C;            /* 5,88:1 pe alb */
  --color-link-hover: #9E2226;
  --color-focus-ring: #EF3C6A;      /* inel, nu text → 3:1 ajunge */

  /* ── Structură ────────────────────────────────────────────────────────── */
  --color-secondary: #203987;       /* alb pe el 10,52:1 · AA ✓ */
  --color-secondary-hover: #16296B;
  --color-data: #FCB037;            /* grafice, hartă, evidențieri;
                                       NICIODATĂ text pe alb */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --color-text: #131A2B;            /* 17,35:1 pe bg-1 · AA ✓ */
  --color-text-secondary: #55607A;  /* 6,29:1 pe bg-1 · AA ✓ */
  --color-text-disabled: #8E96A8;   /* 2,97:1 · doar dezactivat */
  --color-text-inverse: #FFFFFF;
  --color-text-on-yellow: #131A2B;
  /* Butonul „Vreau o conexiune”: galbenul triunghiului din logo, cu text închis
     (feedback client, 26.09.2026: „prea mult roșu”). Alb pe galben nu trece contrastul. */
  --color-connect: #FCB037;
  --color-connect-hover: #F2A11B;
  --color-connect-active: #E08F0A;
  --color-connect-fg: #131A2B;  /* 11,40:1 · singurul permis */

  /* ── Fundaluri și borduri ─────────────────────────────────────────────── */
  --color-bg-1: #FFFFFF;
  --color-bg-2: #F5F6F9;
  --color-bg-3: #EAECF2;
  --color-bg-inverse: #203987;
  --color-bg-map: #0B1B33;
  --color-border: #E1E4ED;
  --color-border-strong: #C9CFDD;
  --color-border-focus: #EF3C6A;

  /* ── Semantice: stare ─────────────────────────────────────────────────── */
  --color-success: #1E7A4C;  --color-success-bg: #E7F4EE;
  --color-warning: #7A4E00;  --color-warning-bg: #FFF4DC;
  /* Distructiv: un roșu mai închis decât acțiunea, ca „Șterge” să nu arate
     ca „Trimite”. Alb pe el 9,17:1. */
  --color-danger: #8C1B1E;   --color-danger-bg: #FBEAEA;
  --color-info: #0472B9;     --color-info-bg: #E8F1FA;

  /* ── Tipuri de profil pe hartă ────────────────────────────────────────── */
  --color-pin-laureat: #FCB037;
  --color-pin-diaspora: #EF3C6A;
  --color-pin-romania: #0472B9;
  --color-pin-institutie: #9A6FD0;
  --color-pin-oportunitate: #2FA46C;

  /* ── Tipografie ───────────────────────────────────────────────────────── */
  --font-display: "Montserrat", Arial, sans-serif;  /* 900 */
  --font-ui: "Montserrat", Arial, sans-serif;       /* 600 — singura greutate încărcată aici */
  --font-text: "Lato", Arial, sans-serif;           /* 400 / 700 */
  /* IBM Plex Mono NU e în brandbook. E folosit exclusiv pentru coduri și
     cifre tabulare — coduri de bilet, ore din agendă, sume — unde cifrele
     trebuie să aibă lățime egală ca să se alinieze pe coloană. Montserrat
     nu are cifre tabulare. */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-display-xl: 4rem;    --lh-display-xl: 1.05;
  --text-display-l: 3rem;     --lh-display-l: 1.08;
  --text-h1: 2.5rem;          --lh-h1: 1.15;
  --text-h2: 2rem;            --lh-h2: 1.2;
  --text-h3: 1.5rem;          --lh-h3: 1.3;
  --text-h4: 1.25rem;         --lh-h4: 1.35;
  --text-body-l: 1.125rem;    --lh-body-l: 1.6;
  --text-body: 1rem;          --lh-body: 1.6;
  --text-body-s: 0.875rem;    --lh-body-s: 1.55;
  --text-caption: 0.8125rem;  --lh-caption: 1.45;
  --text-label: 0.8125rem;    --lh-label: 1.2;
  --measure: 68ch;            /* sub 80 de caractere */

  /* ── Spațiere (bază 4) ────────────────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-pill: 999px;

  /* ── Umbre (tentă bleumarin, niciodată gri neutru) ────────────────────── */
  --shadow-1: 0 1px 2px rgba(19, 26, 43, .06), 0 1px 3px rgba(19, 26, 43, .08);
  --shadow-2: 0 4px 12px rgba(19, 26, 43, .10);
  --shadow-3: 0 16px 40px rgba(19, 26, 43, .18);
  --shadow-focus: 0 0 0 3px var(--color-bg-1), 0 0 0 6px var(--color-focus-ring);

  /* ── Grilă ────────────────────────────────────────────────────────────── */
  --grid-max: 1200px; --grid-gutter: 24px; --grid-margin: 24px;
  --bp-sm: 390px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px;

  /* ── z-index ──────────────────────────────────────────────────────────── */
  --z-base: 0; --z-sticky: 100; --z-dropdown: 200;
  --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;

  /* ── Durate și curbe ──────────────────────────────────────────────────── */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* Sub 768px marginea scade la 16px. */
@media (max-width: 767px) {
  :root { --grid-margin: 16px; }
}