/* =====================================================================
   Volta Ad — Design Tokens
   Single source of styling truth. All values from design-system.md.
   ===================================================================== */

:root {

  /* ── Color Palette ──────────────────────────────────────────── */
  --color-bg-deep:         #0D0F0E;
  --color-bg-section:      #131614;
  --color-surface-dark:    #1A1D1B;
  --color-surface-mid:     #F4F5F2;
  --color-surface-light:   #FFFFFF;
  --color-border-dark:     #2A2E2C;
  --color-border-light:    #E2E5E0;

  /* ── Text ───────────────────────────────────────────────────── */
  --color-text-primary-dark:    #F0F2EE;
  --color-text-secondary-dark:  #9BA39A;
  --color-text-primary-light:   #0D0F0E;
  --color-text-secondary-light: #4A524F;
  --color-text-inverse:         #FFFFFF;
  /* Themable secondary: defaults to the dark-background value; light/mid
     sections flip it to the light-background value (see base.css). */
  --color-text-secondary:       var(--color-text-secondary-dark);

  /* ── Accent ─────────────────────────────────────────────────── */
  --color-accent:        #A3FF47;
  --color-accent-hover:  #8EE637;
  --color-accent-dim:    rgba(163, 255, 71, 0.12);
  --color-accent-text:   #1A2E00;

  /* ── Semantic / State ───────────────────────────────────────── */
  --color-success:         #22C55E;
  --color-error:           #F87171;
  --color-warning:         #FBBF24;
  --color-focus-ring:      #A3FF47;
  --color-focus-ring-light:#1A2E00;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

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

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  4rem;      /* 64px */
  --text-6xl:  5rem;      /* 80px */
  --text-7xl:  6rem;      /* 96px */
  --text-8xl:  7rem;      /* 112px */

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;

  /* ── Spacing ────────────────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Borders ────────────────────────────────────────────────── */
  --border-width:   1px;
  --border-width-2: 2px;
  --border-dark:    1px solid var(--color-border-dark);
  --border-light:   1px solid var(--color-border-light);
  --border-accent:  2px solid var(--color-accent);

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:         0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:         0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:         0 16px 48px rgba(0,0,0,0.6);
  --shadow-accent-glow:0 0 20px rgba(163,255,71,0.15);
  --shadow-card-light: 0 2px 8px rgba(13,15,14,0.1);

  /* ── Container ──────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: var(--space-6);

  /* ── Z-index ────────────────────────────────────────────────── */
  --z-header:  100;
  --z-megamenu: 200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-consent: 500;

  /* ── Transitions ────────────────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease-out;
  --transition-slow:   280ms ease-out;
}