/* ============================================================================
   CSC 1599 Șelimbăr — 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 siglă: roșu #B5242B + negru + alb) — */
  --ink:            #171514;   /* negrul din siglă, usor cald */
  --ink-soft:       #2e2b29;
  --paper:          #ffffff;
  --paper-2:        #f5f3f0;   /* alb cald („hârtie") pentru benzi și fundalul aplicației */
  --paper-3:        #e9e6e1;

  /* — Accent brand: ROȘUL din siglă — */
  --accent:         #b5242b;   /* <<< un singur loc de schimbat brandul (roșul din siglă) */
  --accent-strong:  #8e1a20;   /* hover / stari active */
  --accent-text:    #a81f26;   /* roșu pt TEXT pe fond deschis (contrast AA); dark theme il inlocuieste cu roșu deschis */
  --accent-soft:    #fbe7e8;   /* tentă roșie foarte deschisă (fundal iconite/chips) */
  --gold:           #d8454c;   /* roșu deschis: al doilea ton din gradiente (numele e moștenit) */

  /* — Semantice (light theme) — */
  --bg:             var(--paper);
  --bg-elev:        #ffffff;
  --bg-muted:       var(--paper-2);
  --surface:        #ffffff;
  --surface-2:      #faf9f7;
  --border:         #e3dfd9;
  --border-strong:  #cfc9c1;

  --text:           #1a1a19;
  --text-2:         #52504e;
  --text-3:         #8a8785;
  --text-onaccent:  #ffffff;   /* text ALB pe roșu (butoane/benzi) */
  --text-onink:     #f6f6f6;

  /* — Tipografie — */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-label:   "Archivo", "Arial Narrow", system-ui, sans-serif;   /* etichete: varianta îngustă (font-stretch) */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* — Raze: colțuri ferme (identitate proprie; pastila rămâne doar pt. avatare/contoare) — */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --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(181,36,43,.30);

  /* — Layout — */
  --container: 1920px;                    /* plafon pe ecrane foarte late */
  --gutter: clamp(18px, 5vw, 96px);       /* marginea stânga/dreapta: crește cu ecranul */
  --nav-h: 76px;

  /* — 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:    #f2777c;   /* roșu deschis pt text pe fundal inchis */
  --accent-soft:    #30161a;
  --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:#f2777c; --accent-soft:#30161a;
    --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);
  }
}