/* ============================================================================
   GVA Design Tokens — CSS custom properties
   Gray Voice Agent (GVA) by Gray Solutions
   Source of truth: src/tokens/gva-tokens.json (from the Figma brand book).

   All variables are namespaced --gva-* so they NEVER collide with the site's
   existing theme variables (--accent, --bg, ...). To adopt the brand across the
   site, point those existing vars at these (e.g. --accent: var(--gva-color-chartreuse)).

   Usage:
     @import './tokens/gva-tokens.css';   (or import in main.jsx)
     color: var(--gva-color-text-primary);
     font-family: var(--gva-font-sans);
   ============================================================================ */

/* Primary typeface — loaded so these tokens are self-sufficient wherever imported. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand colours ──────────────────────────────────────────────────────── */
  --gva-color-near-black:    #141414; /* Primary  · ~70% */
  --gva-color-chartreuse:    #C6F03C; /* Accent   · ~10% · signal colour, use sparingly */
  --gva-color-white:         #FFFFFF;
  --gva-color-soft-neutral:  #F3F4EE;
  --gva-color-graphite:      #2B2B2B;
  --gva-color-deep-black:    #0E0F0F; /* Cover / immersive dark background */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --gva-color-text-primary:      #141414;
  --gva-color-text-secondary:    #444444;
  --gva-color-text-muted:        #6B6B6B;
  --gva-color-text-on-dark:       #FFFFFF;
  --gva-color-text-on-dark-muted: #BDBDBA;

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --gva-color-surface-page:    #F9F7F5;
  --gva-color-surface-neutral: #F3F4EE;
  --gva-color-surface-card:    #FFFFFF;
  --gva-color-surface-inverse: #141414;

  /* ── Borders ────────────────────────────────────────────────────────────── */
  --gva-color-border-subtle: #E5E5E0;
  --gva-color-border-muted:  #DCDCD9;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --gva-font-sans:      'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;  /* primary */
  --gva-font-secondary: 'Space Grotesk', 'Manrope', ui-sans-serif, system-ui, sans-serif; /* secondary / display */

  --gva-weight-regular:   400;
  --gva-weight-medium:    500;
  --gva-weight-semibold:  600;
  --gva-weight-extrabold: 800; /* display / cover headings only */

  /* Type scale — size / line-height pairs (px) */
  --gva-text-display-size: 56px;  --gva-text-display-lh: 64px;  --gva-text-display-weight: 600;
  --gva-text-h1-size:      40px;  --gva-text-h1-lh:      48px;  --gva-text-h1-weight:      600;
  --gva-text-h2-size:      32px;  --gva-text-h2-lh:      40px;  --gva-text-h2-weight:      500;
  --gva-text-h3-size:      24px;  --gva-text-h3-lh:      32px;  --gva-text-h3-weight:      500;
  --gva-text-h4-size:      20px;  --gva-text-h4-lh:      28px;  --gva-text-h4-weight:      500;
  --gva-text-body-l-size:  18px;  --gva-text-body-l-lh:  28px;  --gva-text-body-l-weight:  400;
  --gva-text-body-m-size:  16px;  --gva-text-body-m-lh:  24px;  --gva-text-body-m-weight:  400;
  --gva-text-body-s-size:  14px;  --gva-text-body-s-lh:  22px;  --gva-text-body-s-weight:  400;
  --gva-text-caption-size: 12px;  --gva-text-caption-lh: 18px;  --gva-text-caption-weight: 500;

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

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --gva-radius-xs:   2px;
  --gva-radius-sm:   6px;
  --gva-radius-md:   10px;
  --gva-radius-lg:   14px;
  --gva-radius-xl:   16px;
  --gva-radius-pill: 9999px;
}

/* ── Optional type helpers ───────────────────────────────────────────────────
   Convenience classes so the type scale is usable without wiring each property.
   Remove if you only want the raw variables. */
.gva-display { font-family: var(--gva-font-sans); font-size: var(--gva-text-display-size); line-height: var(--gva-text-display-lh); font-weight: var(--gva-text-display-weight); letter-spacing: -0.02em; }
.gva-h1      { font-family: var(--gva-font-sans); font-size: var(--gva-text-h1-size);      line-height: var(--gva-text-h1-lh);      font-weight: var(--gva-text-h1-weight);      letter-spacing: -0.02em; }
.gva-h2      { font-family: var(--gva-font-sans); font-size: var(--gva-text-h2-size);      line-height: var(--gva-text-h2-lh);      font-weight: var(--gva-text-h2-weight); }
.gva-h3      { font-family: var(--gva-font-sans); font-size: var(--gva-text-h3-size);      line-height: var(--gva-text-h3-lh);      font-weight: var(--gva-text-h3-weight); }
.gva-h4      { font-family: var(--gva-font-sans); font-size: var(--gva-text-h4-size);      line-height: var(--gva-text-h4-lh);      font-weight: var(--gva-text-h4-weight); }
.gva-body-l  { font-family: var(--gva-font-sans); font-size: var(--gva-text-body-l-size);  line-height: var(--gva-text-body-l-lh);  font-weight: var(--gva-text-body-l-weight); }
.gva-body-m  { font-family: var(--gva-font-sans); font-size: var(--gva-text-body-m-size);  line-height: var(--gva-text-body-m-lh);  font-weight: var(--gva-text-body-m-weight); }
.gva-body-s  { font-family: var(--gva-font-sans); font-size: var(--gva-text-body-s-size);  line-height: var(--gva-text-body-s-lh);  font-weight: var(--gva-text-body-s-weight); }
.gva-caption { font-family: var(--gva-font-sans); font-size: var(--gva-text-caption-size); line-height: var(--gva-text-caption-lh); font-weight: var(--gva-text-caption-weight); }