/* ============================================================
   VETTED — Design Tokens
   Single source of truth for all CSS custom properties.
   Import this BEFORE theme.css in any page.
   ============================================================ */

:root {
  /* ── Brand ──────────────────────────────────────────────── */
  --color-brand:       #C5F135;   /* Acid lime — primary action */
  --color-brand-dim:   #9BBF2B;   /* Hover/pressed state */
  --color-brand-glow:   rgba(197, 241, 53, 0.3);
  --color-brand-subtle: rgba(197, 241, 53, 0.08);

  /* ── Color semantics ─────────────────────────────────────── */
  --accent:       var(--color-brand);
  --accent-dim:   var(--color-brand-dim);

  /* ── Surfaces ─────────────────────────────────────────────── */
  --color-bg:           #0D0D0D;   /* Page background */
  --color-bg-alt:       #111111;   /* Alternate sections */
  --color-surface:      #181818;   /* Cards, panels */
  --color-surface-2:    #1F1F1F;   /* Hover/elevated */
  --color-surface-3:   #252525;   /* Tertiary surface */
  --color-overlay:      rgba(0,0,0,0.7);

  /* ── Borders ─────────────────────────────────────────────── */
  --color-border:      #272727;
  --color-border-2:    #333333;

  /* ── Text ─────────────────────────────────────────────────── */
  --color-fg:          #F2F0EB;
  --color-fg-muted:    #7A7870;
  --color-fg-subtle:   #4A4845;

  /* ── Semantic status ──────────────────────────────────────── */
  --color-success:     #34D399;
  --color-warning:     #FBBF24;
  --color-error:       #F87171;
  --color-info:        #63B3F0;
  --color-purple:      #A855F7;

  /* ── Typography ──────────────────────────────────────────── */
  --font-head: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;

  /* Type scale */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base: 15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;
  --text-5xl:   48px;
  --text-6xl:   60px;
  --text-hero:  clamp(48px, 7vw, 88px);

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-w: 1200px;
  --gutter: clamp(24px, 5vw, 80px);

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.7);
  --shadow-brand: 0 8px 24px rgba(197,241,53,0.25);
  --shadow-brand-lg: 0 16px 48px rgba(197,241,53,0.3);

  /* Glow variants */
  --glow-brand:   0 0 40px rgba(197,241,53,0.15);
  --glow-brand-strong: 0 0 60px rgba(197,241,53,0.25);
  --glow-border:  inset 0 0 0 1px rgba(197,241,53,0.2);

  /* ── Transitions ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.12s;
  --duration-base: 0.2s;
  --duration-slow: 0.35s;
  --duration-slower: 0.5s;
}