/* ==========================================================================
   Design Tokens — Brand colors, typography, spacing, radii
   Source of truth: CLAUDE.md + style-final.html reference
   ========================================================================== */

:root {
  /* Background */
  --color-bg:             #0A0E1A;
  --color-bg-card:        #111827;
  --color-bg-card-hover:  #161E30;

  /* Primary — Shopify Green */
  --color-green:          #95BF47;
  --color-green-bright:   #ADDA52;
  --color-green-glow:     rgba(149, 191, 71, 0.25);
  --color-green-dim:      rgba(149, 191, 71, 0.08);

  /* Secondary — Neon Cyan */
  --color-cyan:           #22D3EE;
  --color-cyan-glow:      rgba(34, 211, 238, 0.3);
  --color-cyan-dim:       rgba(34, 211, 238, 0.06);

  /* Tertiary — Teal */
  --color-teal:           #14B8A6;

  /* Accent — Amber (warning callouts) */
  --color-amber:          #F59E0B;
  --color-amber-dim:      rgba(245, 158, 11, 0.08);

  /* Text */
  --color-text:           #EFF3FB;
  --color-text-secondary: #8B97B5;
  --color-text-muted:     #3D4D6A;

  /* Borders */
  --color-border:         rgba(140, 155, 190, 0.07);

  /* Typography */
  --font-display:         'Plus Jakarta Sans', sans-serif;
  --font-mono:            'DM Mono', monospace;

  --fw-regular:           400;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-extrabold:         800;

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;

  /* Border radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;

  /* Container */
  --container-max:      1080px;
  --container-padding:  24px;
}