/* ──────────────────────────────────────────────────────────────
   Glitchwood — Foundation tokens
   Source: GW - Design System.fig → /Fundations/*
   ────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');

:root {
  /* ── Primary brand (teal) ─────────────────────────────────── */
  --gw-primary-50:  #EBFDFE;
  --gw-primary-100: #CCF9FB;
  --gw-primary-200: #99F3F7;
  --gw-primary-300: #66EDF3;
  --gw-primary-400: #33E7EF;
  --gw-primary-500: #00B4BD;   /* canonical brand teal */
  --gw-primary-600: #009097;
  --gw-primary-700: #006C71;
  --gw-primary-800: #00484C;
  --gw-primary-900: #002426;

  /* ── Neutral / greyscale ──────────────────────────────────── */
  --gw-neutral-0:   #FFFFFF;
  --gw-neutral-50:  #F7F8F9;
  --gw-neutral-100: #EEF0F2;
  --gw-neutral-200: #D7DADE;
  --gw-neutral-300: #B0B5BB;
  --gw-neutral-400: #888F97;
  --gw-neutral-500: #616A74;
  --gw-neutral-600: #4E5660;
  --gw-neutral-700: #3E4349;   /* wordmark ink */
  --gw-neutral-800: #2A2E33;
  --gw-neutral-900: #15181B;

  /* ── Extra / semantic accents ─────────────────────────────── */
  --gw-success:  #22C55E;
  --gw-warning:  #F59E0B;
  --gw-danger:   #EF4444;
  --gw-info:     #3B82F6;
  --gw-accent:   #7C3AED;      /* violet accent used in gradients */

  /* ── Gradients (approximate from Figma) ───────────────────── */
  --gw-grad-teal:    linear-gradient(135deg, #00B4BD 0%, #66EDF3 100%);
  --gw-grad-dusk:    linear-gradient(135deg, #00484C 0%, #00B4BD 60%, #CCF9FB 100%);
  --gw-grad-violet:  linear-gradient(135deg, #7C3AED 0%, #00B4BD 100%);
  --gw-grad-sunrise: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);

  /* ── Semantic foreground/background ───────────────────────── */
  --gw-fg-1: var(--gw-neutral-900);
  --gw-fg-2: var(--gw-neutral-700);
  --gw-fg-3: var(--gw-neutral-500);
  --gw-fg-inverse: var(--gw-neutral-0);
  --gw-bg-1: var(--gw-neutral-0);
  --gw-bg-2: var(--gw-neutral-50);
  --gw-bg-3: var(--gw-neutral-100);
  --gw-border: var(--gw-neutral-200);
  --gw-border-strong: var(--gw-neutral-300);

  /* ── Spacing scale (4px base) ─────────────────────────────── */
  --gw-space-0: 0;
  --gw-space-1: 4px;
  --gw-space-2: 8px;
  --gw-space-3: 12px;
  --gw-space-4: 16px;
  --gw-space-5: 24px;
  --gw-space-6: 32px;
  --gw-space-7: 48px;
  --gw-space-8: 64px;
  --gw-space-9: 96px;

  /* ── Radius ───────────────────────────────────────────────── */
  --gw-radius-xs: 3px;          /* buttons */
  --gw-radius-sm: 6px;
  --gw-radius-md: 8px;
  --gw-radius-lg: 12px;
  --gw-radius-xl: 20px;
  --gw-radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --gw-shadow-xs: 0 1px 2px rgba(20,24,28,0.06);
  --gw-shadow-sm: 0 1px 3px rgba(20,24,28,0.08), 0 1px 2px rgba(20,24,28,0.04);
  --gw-shadow-md: 0 4px 10px rgba(20,24,28,0.08), 0 2px 4px rgba(20,24,28,0.04);
  --gw-shadow-lg: 0 12px 28px rgba(20,24,28,0.12), 0 4px 8px rgba(20,24,28,0.06);
  --gw-shadow-xl: 0 24px 48px rgba(20,24,28,0.16), 0 8px 16px rgba(20,24,28,0.08);
  --gw-shadow-brand: 0 8px 24px rgba(0,180,189,0.28);

  /* ── Type ─────────────────────────────────────────────────── */
  --gw-font-display: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --gw-font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --gw-font-secondary: 'Roboto', 'Inter', system-ui, sans-serif;
  --gw-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* scale — 1.2 modular, anchored at 18px body */
  --gw-text-xs:   12px;
  --gw-text-sm:   14px;
  --gw-text-base: 18px;   /* matches button label size in Figma */
  --gw-text-md:   20px;
  --gw-text-lg:   24px;
  --gw-text-xl:   32px;
  --gw-text-2xl:  44px;
  --gw-text-3xl:  60px;
  --gw-text-4xl:  80px;

  --gw-lh-tight:  1.1;
  --gw-lh-snug:   1.25;
  --gw-lh-base:   1.5;
  --gw-lh-loose:  1.7;

  --gw-weight-regular: 400;
  --gw-weight-medium:  500;
  --gw-weight-semibold: 600;
  --gw-weight-bold:     700;
  --gw-weight-black:    800;

  /* ── Motion ───────────────────────────────────────────────── */
  --gw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --gw-dur-fast:   120ms;
  --gw-dur-base:   200ms;
  --gw-dur-slow:   360ms;
}

/* ──────────────────────────────────────────────────────────────
   Semantic element styles
   ────────────────────────────────────────────────────────────── */
.gw-h1, h1.gw {
  font-family: var(--gw-font-display);
  font-size: var(--gw-text-4xl);
  font-weight: var(--gw-weight-black);
  line-height: var(--gw-lh-tight);
  letter-spacing: -0.025em;
  color: var(--gw-fg-1);
}
.gw-h2, h2.gw {
  font-family: var(--gw-font-display);
  font-size: var(--gw-text-3xl);
  font-weight: var(--gw-weight-bold);
  line-height: var(--gw-lh-tight);
  letter-spacing: -0.02em;
  color: var(--gw-fg-1);
}
.gw-h3, h3.gw {
  font-family: var(--gw-font-display);
  font-size: var(--gw-text-2xl);
  font-weight: var(--gw-weight-bold);
  line-height: var(--gw-lh-snug);
  letter-spacing: -0.015em;
  color: var(--gw-fg-1);
}
.gw-h4, h4.gw {
  font-family: var(--gw-font-display);
  font-size: var(--gw-text-xl);
  font-weight: var(--gw-weight-semibold);
  line-height: var(--gw-lh-snug);
  color: var(--gw-fg-1);
}
.gw-body, p.gw {
  font-family: var(--gw-font-body);
  font-size: var(--gw-text-base);
  font-weight: var(--gw-weight-regular);
  line-height: var(--gw-lh-base);
  color: var(--gw-fg-2);
}
.gw-small {
  font-size: var(--gw-text-sm);
  color: var(--gw-fg-3);
}
.gw-eyebrow {
  font-family: var(--gw-font-body);
  font-size: var(--gw-text-xs);
  font-weight: var(--gw-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gw-primary-600);
}
.gw-code, code.gw {
  font-family: var(--gw-font-mono);
  font-size: 0.92em;
  background: var(--gw-bg-3);
  padding: 2px 6px;
  border-radius: var(--gw-radius-xs);
}