/* ============================================================================
   VOICEKOD — Design Tokens
   ----------------------------------------------------------------------------
   SURSA UNICA DE ADEVAR pentru culoare, tipografie si spatiere.

   Valorile marcate [M] sunt MASURATE din materialele originale din
   ../reference/ prin brand/palette-extraction.py. Nu le modifica manual —
   daca vrei alta culoare, schimbi materialul sursa sau iesi din brand.

   Valorile marcate [D] sunt DERIVATE din cele masurate, pentru completarea
   scarii acolo unde sursa nu ofera un esantion.

   Verificare:  python brand/palette-extraction.py --verify
   ============================================================================ */

:root {
  /* ==========================================================================
     1. VERDE — Deep Emerald
     Sursa masurata: logo-original.jpg (verdele de brand) si
     mockup-homepage-ru.jpg (scara de fundal a interfetei).
     ========================================================================== */

  --vk-green-950: #001910;   /* [M] p5  machete — cel mai adanc, overlay/footer */
  --vk-green-900: #001F17;   /* [M] p25 machete — FUNDAL PRINCIPAL             */
  --vk-green-850: #0A2214;   /* [M] p50 machete — fundal sectiune alternanta   */
  --vk-green-800: #0F2717;   /* [M] p75 machete — fundal ridicat               */
  --vk-green-700: #082B21;   /* [M] interior card — suprafata                  */
  --vk-green-600: #03321E;   /* [M] logo p50 — ★ VERDELE MASTER DE BRAND ★     */
  --vk-green-500: #113227;   /* [M] muchie card — bordura / separator          */
  --vk-green-400: #2C4A3A;   /* [D] +18% luminozitate — hover, stare inactiva  */
  --vk-green-300: #4A6B58;   /* [D] — text dezactivat pe inchis                */

  /* ==========================================================================
     2. AURIU — Champagne Gold
     ATENTIE: aurul din logo E UN GRADIENT vertical, nu o culoare plata.
     Redarea lui ca fill plat e greseala numarul unu de reprodus.
     Scara amesteca doua surse reale, care CHIAR sunt culori diferite:
       100-400  aurul IDENTITAR   (logo-original.jpg — sampanie, rece)
       500-600  aurul de ACTIUNE  (mockup butoane — cald, bronz)
     ========================================================================== */

  --vk-gold-100: #F8E5A0;    /* [M] p97 logo — highlight, varf de gradient     */
  --vk-gold-200: #EBD997;    /* [M] p85 logo — zona luminoasa                  */
  --vk-gold-300: #DCC88D;    /* [M] p60 logo — ★ AURUL MASTER DE BRAND ★       */
  --vk-gold-400: #ECBA71;    /* [M] p40 logo — mediu cald, zona monogramei     */
  --vk-gold-500: #CFA45F;    /* [M] p90 butoane — ★ AURIU DE ACTIUNE (UI) ★    */
  --vk-gold-600: #A7743B;    /* [M] p50 butoane — bronz adanc, hover           */
  --vk-gold-700: #6E4A1E;    /* [D] — text auriu PE FUNDAL DESCHIS (5.5:1 AA)  */
  --vk-gold-800: #55391A;    /* [D] — contur, text adanc pe ivoire (7.4:1 AAA) */

  /* REGULA: gold-500 si gold-600 sunt facute pentru fundal INCHIS.
     Pe ivoire dau 1.6:1 respectiv 2.8:1 — mult sub pragul de text.
     Pe fundal deschis se foloseste gold-700 sau gold-800, niciodata 500/600.
     Regula e verificata automat de palette-extraction.py (FORBIDDEN_PAIRS). */

  /* ==========================================================================
     3. NEUTRE CALDE
     Sursa masurata: poster-brand.jpg (tinuta crem, fundal light) si
     corpul de text din machete. Nimic nu e alb pur — totul e cald.
     ========================================================================== */

  --vk-ivory: #E1D6CB;       /* [M] p80 poster — fundal sectiune light         */
  --vk-cream: #DBCFC1;       /* [M] p50 poster — ★ CREMUL MASTER ★             */
  --vk-sand: #D2C5B6;        /* [M] p20 poster — carduri pe light              */
  --vk-text-on-dark: #E9E2D7;/* [M] p50 machete — corp text pe fundal inchis   */
  --vk-text-muted: #B3AA9B;  /* [D] — text secundar pe fundal inchis           */
  --vk-warm-gray: #8A7F6E;   /* [D] — text secundar pe fundal deschis          */

  /* ==========================================================================
     4. GRADIENTUL AURIU
     Reconstituit din scanarea verticala a monogramei si a wordmark-ului.
     Fiecare stop e o valoare masurata. Directia 180deg = exact ca in logo.
     ========================================================================== */

  --vk-gold-gradient: linear-gradient(
    180deg,
    #F8E5A0 0%,      /* highlight  */
    #EBD997 18%,
    #DCC88D 45%,     /* core       */
    #ECBA71 62%,     /* mediu cald */
    #CFA45F 84%,
    #A7743B 100%     /* bronz      */
  );

  /* Varianta orizontala — pentru linii, borduri si separatoare */
  --vk-gold-gradient-h: linear-gradient(
    90deg,
    transparent 0%,
    #A7743B 15%,
    #DCC88D 50%,
    #A7743B 85%,
    transparent 100%
  );

  /* Fundal de sectiune: verde adanc cu vignette calda, ca in machete */
  --vk-green-radial: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    #0F2717 0%,
    #001F17 55%,
    #001910 100%
  );

  /* ==========================================================================
     5. TOKENI SEMANTICI
     Foloseste ASTIA in cod, nu scara numerica. Daca o valoare se schimba,
     se schimba intr-un singur loc.
     ========================================================================== */

  --vk-bg: var(--vk-green-900);
  --vk-bg-deep: var(--vk-green-950);
  --vk-bg-alt: var(--vk-green-850);
  --vk-surface: var(--vk-green-700);
  --vk-surface-raised: var(--vk-green-600);
  --vk-border: var(--vk-green-500);
  --vk-border-gold: rgba(220, 200, 141, 0.28);  /* gold-300 la 28%            */

  --vk-brand-green: var(--vk-green-600);        /* verdele identitatii        */
  --vk-brand-gold: var(--vk-gold-300);          /* aurul identitatii          */

  --vk-text: var(--vk-text-on-dark);
  --vk-text-dim: var(--vk-text-muted);
  --vk-heading: var(--vk-gold-300);
  --vk-accent: var(--vk-gold-500);
  --vk-accent-hover: var(--vk-gold-600);
  --vk-on-accent: var(--vk-green-950);          /* text PE buton auriu        */

  /* Sectiuni light (inversate) */
  --vk-light-bg: var(--vk-ivory);
  --vk-light-surface: var(--vk-sand);
  --vk-light-text: var(--vk-green-950);
  --vk-light-text-dim: var(--vk-warm-gray);
  --vk-light-accent: var(--vk-gold-700);

  /* ==========================================================================
     6. TIPOGRAFIE
     Doua familii, ambele cu suport Chirilic — obligatoriu pentru RU.
       Display : Cormorant Garamond — serif high-contrast, ca in wordmark
       Corp    : Montserrat — geometric sans, ca in machete
     ========================================================================== */

  --vk-font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --vk-font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Scara fluida — se adapteaza intre 360px si 1440px fara breakpoints */
  --vk-text-xs:   clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --vk-text-sm:   clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --vk-text-base: clamp(0.9375rem, 0.90rem + 0.19vw, 1rem);
  --vk-text-lg:   clamp(1.0625rem, 1.00rem + 0.31vw, 1.25rem);
  --vk-text-xl:   clamp(1.25rem, 1.14rem + 0.55vw, 1.625rem);
  --vk-text-2xl:  clamp(1.5rem, 1.29rem + 1.05vw, 2.25rem);
  --vk-text-3xl:  clamp(1.875rem, 1.50rem + 1.88vw, 3.25rem);
  --vk-text-4xl:  clamp(2.25rem, 1.61rem + 3.20vw, 4.5rem);

  --vk-tracking-wordmark: 0.131em;  /* VOICEKOD — masurat din logo-master-2026*/
  --vk-tracking-caps: 0.12em;       /* titluri all-caps                       */
  --vk-tracking-body: 0.01em;

  --vk-leading-tight: 1.15;
  --vk-leading-heading: 1.25;
  --vk-leading-body: 1.7;
  --vk-leading-loose: 1.9;

  /* ==========================================================================
     7. SPATIERE, RAZE, UMBRE
     Scara pe baza 8px, cu doua trepte fine dedesubt.
     ========================================================================== */

  --vk-space-1: 0.25rem;
  --vk-space-2: 0.5rem;
  --vk-space-3: 0.75rem;
  --vk-space-4: 1rem;
  --vk-space-6: 1.5rem;
  --vk-space-8: 2rem;
  --vk-space-12: 3rem;
  --vk-space-16: 4rem;
  --vk-space-24: 6rem;
  --vk-space-32: 8rem;

  --vk-radius-sm: 2px;
  --vk-radius: 4px;
  --vk-radius-lg: 8px;
  --vk-radius-pill: 999px;

  /* Umbre verzi, nu negre — negrul rupe atmosfera calda */
  --vk-shadow-sm: 0 1px 3px rgba(0, 12, 8, 0.4);
  --vk-shadow: 0 4px 16px rgba(0, 12, 8, 0.45);
  --vk-shadow-lg: 0 12px 40px rgba(0, 12, 8, 0.55);
  --vk-glow-gold: 0 0 24px rgba(220, 200, 141, 0.22);

  /* Latimi de continut */
  --vk-measure: 68ch;          /* latime optima de citire                     */
  --vk-container: 1200px;

  /* Miscare — lenta si calma, brandul nu e grabit */
  --vk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --vk-duration: 420ms;
  --vk-duration-fast: 220ms;
}

/* ============================================================================
   Respecta preferinta de miscare redusa. Nu e optional.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vk-duration: 1ms;
    --vk-duration-fast: 1ms;
  }
}