/* ============================================================================
   Solva — TOKENS. Sursa unică de adevăr pentru culoare, tipografie și spațiere.
   Importat de TOATE paginile. Nicio pagină nu-și mai definește propriul :root.

   De ce există: site-ul avea patru sisteme paralele, cu nume diferite pentru
   aceleași concepte și chiar cu polaritate inversă —
     landing (assets/style.css)      --bg:#ffffff  --accent:#0071e3   light-default
     become-ambassador               --bg-base:#0b0f14  --brand-accent:#7cc4ff
     dashboards                      --bg:#0b0f14  --accent:#7cc4ff
     legal (Legal/build_html.py)     --bg:#0f1115  --accent:#4f8cff   DARK-default
   Rezultatul: landing alb, restul bleumarin, iar Termenii ieșeau întunecați
   într-un site altfel luminos. Arăta a trei produse diferite, nu a unul.

   Trei scări, fiindcă exact absența lor face un site să pară „stilizat din ochi":
     · TIPOGRAFIE — erau 20 de mărimi (13 / 13.5 / 14 / 14.5 / 16 / 17 …) plus 7
       formule clamp() fiecare cu min/vw/max ales de mână. Acum: 8 trepte pe un
       raport constant + 4 trepte fluide pentru titluri.
     · SPAȚIERE — erau 86 de valori distincte de padding/margin/gap, zero token.
       Acum: o scară pe bază de 4px. Spațierea inconsistentă e ce face o pagină
       să pară „aproape aliniată".
     · RAZE — o scară, în loc de 24px/22px/18px/16px alese pe element.
   ========================================================================== */

:root{
  /* ── Culoare — LIGHT (implicit) ─────────────────────────────────────────
     Polaritatea implicită a întregului site e LUMINOASĂ: e front door-ul
     brandului și se potrivește cu aplicația iOS, care e light-first. */
  --bg:#ffffff;
  --bg-elev:#f5f5f7;
  --card:#ffffff;
  --card-2:#fbfbfd;
  --fg:#1d1d1f;
  --fg-soft:#3a3a3c;
  --muted:#6e6e73;
  --muted-2:#86868b;
  --border:rgba(0,0,0,.08);
  --border-strong:rgba(0,0,0,.14);
  --hairline:rgba(0,0,0,.06);

  --accent:#0071e3;
  --accent-2:#6a5cff;
  --accent-3:#00c2b8;
  --on-accent:#ffffff;
  --ring:rgba(0,113,227,.35);

  /* Semantice — erau inventate local pe fiecare pagină (#ff6b6b, #46d39a…). */
  --danger:#d70015;
  --danger-soft:rgba(215,0,21,.10);
  --success:#0a7f43;
  --success-soft:rgba(10,127,67,.10);
  --warning:#a85800;
  --warning-soft:rgba(168,88,0,.10);

  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:0 30px 80px rgba(0,0,0,.12);

  --nav-bg:rgba(255,255,255,.72);
  --glow-1:rgba(0,113,227,.22);
  --glow-2:rgba(106,92,255,.20);
  --glow-3:rgba(0,194,184,.16);

  /* ── Tipografie ────────────────────────────────────────────────────────
     Trepte pe raport ~1.18–1.22. Corpul e --text-md (17px), ca până acum. */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Suprafețele landing-ului (premium, aproape monocrom): scenă neagră pentru
     hero/antrenor/subsol, alb și gri-platină pentru panourile de produs.
     Nu înlocuiesc --bg/--fg (folosite de restul paginilor), le completează. */
  --ink:#0a0a0b;
  --ink-2:#141416;
  --ink-3:#1c1c1f;
  --on-ink:#f5f5f7;
  --on-ink-muted:rgba(245,245,247,.62);
  --on-ink-faint:rgba(245,245,247,.38);
  --platinum:#f5f5f7;
  --platinum-2:#e9e9ee;
  --rule:rgba(0,0,0,.10);
  --rule-ink:rgba(245,245,247,.14);

  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:15px;
  --text-md:17px;
  --text-lg:20px;
  --text-xl:24px;
  --text-2xl:29px;

  /* Titluri fluide — patru trepte, în locul a șapte clamp-uri ad-hoc. */
  --display-sm:clamp(26px,3.4vw,36px);
  --display-md:clamp(30px,4.4vw,46px);
  --display-lg:clamp(34px,5.4vw,58px);
  --display-xl:clamp(42px,7.2vw,80px);

  --leading-tight:1.08;
  --leading-snug:1.3;
  --leading-normal:1.6;

  /* Urmărirea scade pe măsură ce textul crește — regula clasică de tipografie,
     aplicată până acum inconsistent, per selector. */
  --tracking-display:-.035em;
  --tracking-heading:-.02em;
  --tracking-body:-.01em;
  --tracking-caps:.06em;

  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* ── Spațiere — bază 4px ───────────────────────────────────────────────── */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:112px;

  /* Ritm vertical al secțiunilor — un singur token, nu o valoare per secțiune. */
  --section-y:100px;
  --gutter:24px;
  --measure:820px;   /* lățime de citit confortabil */
  --page:1120px;

  /* ── Raze ──────────────────────────────────────────────────────────────── */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-2xl:32px;
  --r-full:980px;

  /* ── Culori de DATE (nu de interfață) ───────────────────────────────────
     Nivelurile de abonament, folosite în legende și grafice. Sunt o codificare
     de categorie, deci nu se schimbă cu tema — dar stau aici, nu ca hex în
     markup, ca să fie un singur loc de schimbat dacă apare un nivel nou. */
  --tier-premium:#22c55e;
  --tier-plus:#38bdf8;
  --tier-free:#64748b;

  /* ── Mișcare ───────────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:.18s;
  --dur:.25s;
  --dur-slow:.7s;
}

/* ── Culoare — DARK (automat, după preferința sistemului) ───────────────── */
@media (prefers-color-scheme: dark){
  :root{
    --platinum:#141416;
    --platinum-2:#1c1c1f;
    --rule:rgba(245,245,247,.12);
    --bg:#000000;
    --bg-elev:#0a0a0c;
    --card:#131316;
    --card-2:#17171b;
    --fg:#f5f5f7;
    --fg-soft:#e6e6ea;
    --muted:#a1a1aa;
    --muted-2:#8a8a92;
    --border:rgba(255,255,255,.10);
    --border-strong:rgba(255,255,255,.18);
    --hairline:rgba(255,255,255,.08);

    --accent:#2e8bff;
    --accent-2:#8b7bff;
    --accent-3:#22d3c4;
    --on-accent:#ffffff;
    --ring:rgba(46,139,255,.45);

    --danger:#ff6b6b;
    --danger-soft:rgba(255,107,107,.14);
    --success:#46d39a;
    --success-soft:rgba(70,211,154,.14);
    --warning:#f0a35e;
    --warning-soft:rgba(240,163,94,.14);

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 10px 40px rgba(0,0,0,.5);
    --shadow-lg:0 40px 100px rgba(0,0,0,.6);

    --nav-bg:rgba(10,10,12,.62);
    --glow-1:rgba(46,139,255,.30);
    --glow-2:rgba(139,123,255,.24);
    --glow-3:rgba(34,211,196,.18);
  }
}

/* ── Suprafața „consolă" ────────────────────────────────────────────────────
   Dashboardurile (/admin, /ambassadors, /ambassador) rămân ÎNTOTDEAUNA
   întunecate, indiferent de preferința sistemului: sunt unelte interne, privite
   mult timp, cu multe date dense — și e util să se distingă vizual de site-ul
   public, ca să știi dintr-o privire că ești „în spate".
   Nu mai e însă o paletă INVENTATĂ separat: sunt exact tokenii dark de mai sus,
   deci tipografia, spațierea și razele rămân comune cu restul site-ului.
   Folosire: <html data-surface="console">                                   */
[data-surface="console"]{
  --bg:#0b0f14;
  --bg-elev:#10161e;
  --card:#141a22;
  --card-2:#1b232d;
  --fg:#eef2f7;
  --fg-soft:#dbe3ec;
  --muted:#9aa7b4;
  --muted-2:#7d8a97;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.20);
  --hairline:rgba(255,255,255,.07);

  --accent:#7cc4ff;
  --accent-2:#8b7bff;
  --accent-3:#3ad0c0;
  --on-accent:#04121a;
  --ring:rgba(124,196,255,.45);

  --danger:#ff6b6b;
  --danger-soft:rgba(255,107,107,.14);
  --success:#46d39a;
  --success-soft:rgba(70,211,154,.14);
  --warning:#f0a35e;
  --warning-soft:rgba(240,163,94,.14);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 40px rgba(0,0,0,.5);
  --shadow-lg:0 40px 100px rgba(0,0,0,.6);

  --nav-bg:rgba(11,15,20,.72);
  --glow-1:rgba(124,196,255,.24);
  --glow-2:rgba(139,123,255,.20);
  --glow-3:rgba(58,208,192,.16);

  --section-y:var(--space-9);
}