/* ============================================================
   GraFik Arena — Design tokens
   Monochrome charcoal/black foundation + metallic gold accent.
   Source of truth: claude.ai/design handoff bundle.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* --- Brand core ------------------------------------------- */
  --ga-gold:        #E6B33E;
  --ga-gold-light:  #F4D77B;
  --ga-gold-deep:   #B8841A;
  --ga-gold-soft:   #F7E9C2;

  --ga-ink:         #141414;
  --ga-charcoal:    #2B2B2B;
  --ga-charcoal-2:  #3A3A3A;

  --ga-white:       #FFFFFF;
  --ga-paper:       #F4F4F4;
  --ga-card:        #ECECEC;
  --ga-line:        #DBDBDB;

  /* --- Neutral grey scale ----------------------------------- */
  --ga-grey-900:    #1B1B1B;
  --ga-grey-700:    #4A4A4A;
  --ga-grey-500:    #757575;
  --ga-grey-400:    #9A9A9A;
  --ga-grey-300:    #C4C4C4;
  --ga-grey-200:    #E2E2E2;
  --ga-grey-100:    #F0F0F0;

  /* --- Semantic status -------------------------------------- */
  --ga-success:     #3C9B6E;
  --ga-warning:     #E6B33E;
  --ga-danger:      #D2503C;
  --ga-info:        #4A78B5;

  /* --- Signature gradients ---------------------------------- */
  --ga-gradient-gold:      linear-gradient(135deg, #F6D98A 0%, #E6B33E 45%, #B8841A 100%);
  --ga-gradient-dark:      linear-gradient(155deg, #2E2E2E 0%, #1A1A1A 60%, #0E0E0E 100%);
  --ga-gradient-spotlight: radial-gradient(120% 120% at 70% 10%, #3A3A3A 0%, #1A1A1A 55%, #0C0C0C 100%);

  /* --- Semantic aliases ------------------------------------- */
  --bg-page:        var(--ga-paper);
  --bg-dark:        var(--ga-ink);
  --surface-card:   var(--ga-white);
  --surface-card-grey: var(--ga-card);
  --surface-raised: var(--ga-charcoal);

  --text-primary:   var(--ga-ink);
  --text-body:      var(--ga-grey-700);
  --text-muted:     var(--ga-grey-500);
  --text-on-dark:   var(--ga-white);
  --text-on-dark-muted: #B8B8B8;
  --text-accent:    var(--ga-gold-deep);

  --accent:         var(--ga-gold);
  --accent-hover:   var(--ga-gold-deep);
  --border-subtle:  var(--ga-line);
  --border-dark:    var(--ga-charcoal-2);
  --focus-ring:     rgba(230, 179, 62, 0.45);

  /* --- Typography ------------------------------------------- */
  --font-display: 'Jost', 'Century Gothic', sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --fw-thin: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --fs-display: clamp(48px, 7vw, 88px);
  --fs-h1: clamp(36px, 5vw, 56px);
  --fs-h2: clamp(28px, 3.5vw, 40px);
  --fs-h3: 24px; --fs-h4: 20px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px;
  --fs-caption: 12px; --fs-eyebrow: 13px;

  --lh-tight: 1.02; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.65;

  --ls-wordmark: 0.42em; --ls-eyebrow: 0.22em; --ls-heading: 0.01em;
  --ls-tight: -0.01em; --ls-normal: 0;

  /* --- Spacing scale (4px base) ----------------------------- */
  --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; --space-32: 128px;

  /* --- Radius ----------------------------------------------- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;

  /* --- Borders ---------------------------------------------- */
  --border-hair: 1px; --border-thin: 1.5px; --border-bold: 2px;

  /* --- Shadows (soft, neutral) ------------------------------ */
  --shadow-xs: 0 1px 2px rgba(20,20,20,0.06);
  --shadow-sm: 0 2px 8px rgba(20,20,20,0.08);
  --shadow-md: 0 8px 24px rgba(20,20,20,0.10);
  --shadow-lg: 0 18px 48px rgba(20,20,20,0.14);
  --shadow-gold: 0 10px 30px rgba(184,132,26,0.28);

  /* --- Motion ----------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;

  /* --- Layout ----------------------------------------------- */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(20px, 5vw, 64px);
}