/* ============================================================================
   CSM Unirea — variables.css
   Design tokens (culori, spatii, umbre, raze). Sursa unica de adevar pentru
   branding. Culoarea de accent se schimba dintr-un singur loc (--accent).
   Tema light = default; tema dark via [data-theme="dark"] SAU prefers-color-scheme.
   ========================================================================== */

:root {
  /* — Brand (derivat din sigla: negru #2B2A29 + griuri #E8E8E8 / #D8D6D7) — */
  --ink:            #211f1e;   /* negrul din siglă, usor cald */
  --ink-soft:       #3a3836;
  --paper:          #ffffff;
  --paper-2:        #f4f4f5;   /* griul deschis din siglă */
  --paper-3:        #e8e8e8;

  /* — Accent brand: AURIU gălbui (complementar cu negru/alb din siglă) — */
  --accent:         #cba033;   /* <<< un singur loc de schimbat brandul (auriu) */
  --accent-strong:  #9a7411;   /* hover / stari active */
  --accent-text:    #8f6c10;   /* auriu pt TEXT pe fond deschis (contrast AA); dark theme il inlocuieste cu auriu deschis */
  --accent-soft:    #f7edcf;   /* tinta aurie foarte deschisa (fundal iconite/chips) */
  --gold:           #e7cb6d;   /* champagne deschis: sheen/gradient/medalii */

  /* — Semantice (light theme) — */
  --bg:             var(--paper);
  --bg-elev:        #ffffff;
  --bg-muted:       var(--paper-2);
  --surface:        #ffffff;
  --surface-2:      #fafafa;
  --border:         #e4e4e7;
  --border-strong:  #d4d4d8;

  --text:           #1a1a19;
  --text-2:         #52504e;
  --text-3:         #8a8785;
  --text-onaccent:  #241f0d;   /* text INCHIS pe auriu (butoane/benzi aurii) */
  --text-onink:     #f6f6f6;

  /* — Tipografie — */
  --font-display: "Oswald", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* — Raze — */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* — Spatii (scala 4px) — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* — Umbre — */
  --shadow-sm: 0 1px 2px rgba(20,18,17,.06), 0 1px 3px rgba(20,18,17,.08);
  --shadow-md: 0 4px 12px rgba(20,18,17,.08), 0 2px 4px rgba(20,18,17,.06);
  --shadow-lg: 0 18px 40px rgba(20,18,17,.14), 0 6px 14px rgba(20,18,17,.08);
  --shadow-accent: 0 10px 30px rgba(203,160,51,.36);

  /* — Layout — */
  --container: 1180px;
  --nav-h: 74px;

  /* — Motion — */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .35s;
}

/* ── Tema DARK ────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:             #131211;
  --bg-elev:        #1b1a18;
  --bg-muted:       #1b1a18;
  --surface:        #1c1b19;
  --surface-2:      #232120;
  --border:         #302e2c;
  --border-strong:  #403d3a;

  --text:           #f2f0ee;
  --text-2:         #b8b4b0;
  --text-3:         #86827e;
  --text-onink:     #f6f6f6;

  --accent-text:    #e2c25a;   /* auriu deschis pt text pe fundal inchis */
  --accent-soft:    #2a2413;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 44px rgba(0,0,0,.6);
}

/* Fallback pe preferinta sistemului daca utilizatorul nu a ales explicit.
   [data-theme] setat de JS castiga oricum, in ambele sensuri. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#131211; --bg-elev:#1b1a18; --bg-muted:#1b1a18;
    --surface:#1c1b19; --surface-2:#232120;
    --border:#302e2c; --border-strong:#403d3a;
    --text:#f2f0ee; --text-2:#b8b4b0; --text-3:#86827e;
    --accent-text:#e2c25a; --accent-soft:#2a2413;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 14px rgba(0,0,0,.45);
    --shadow-lg:0 20px 44px rgba(0,0,0,.6);
  }
}