/* =========================================================
   Vouch Design System — colors & typography tokens
   Source of truth: flutter/lib/theme/app_theme.dart
   Flutter dark-mode tokens ported to CSS custom properties.
   ========================================================= */

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

:root {
  /* ── Background gradient stops ───────────────────────── */
  --bg-top:       #1B2B6B;
  --bg-mid:       #0A0E2A;
  --bg-bottom:    #060913;

  --bg-gradient:  linear-gradient(180deg, #1B2B6B 0%, #0A0E2A 50%, #060913 100%);

  /* ── Surfaces ─────────────────────────────────────────── */
  --surface:          #141B3E;
  --surface-border:   #252D55;
  --surface-elevated: #1E2A4A;

  /* ── Brand / primary ─────────────────────────────────── */
  --indigo:        #6C8EFF;

  /* ── Accents / semantic ──────────────────────────────── */
  --mint:          #10E2A0;
  --coral:         #FF6B6B;
  --amber:         #F59E0B;

  /* ── CTA gradient ────────────────────────────────────── */
  --violet-start:  #4F46E5;
  --violet-end:    #7C3AED;
  --violet-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);

  /* ── Tab bar ─────────────────────────────────────────── */
  --tab-active:    #5B4FDB;
  --tab-inactive:  #71717A;

  /* ── Text scale ──────────────────────────────────────── */
  --text-primary:    #FFFFFF;
  --text-secondary:  #B0B8D1;
  --text-muted:      #8892B0;
  --text-disabled:   #4A5278;

  /* ── Status rings ────────────────────────────────────── */
  --status-confirmed: #10E2A0;
  --status-pending:   #FF6B6B;
  --status-joined:    rgba(255,255,255,0.6);

  /* ── Borders / utility ───────────────────────────────── */
  --ghost-border:  rgba(255,255,255,0.3);
  --divider:       #252D55;
  --chip-surface:  rgba(255,255,255,0.15);

  /* ── Type families ───────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', 'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, SFMono-Regular, monospace;

  /* ── Type scale ──────────────────────────────────────── */
  --fs-display-l: 48px;   --fw-display-l: 800;  --lh-display-l: 1.1;
  --fs-display-m: 36px;   --fw-display-m: 700;  --lh-display-m: 1.15;
  --fs-headline-l: 28px;  --fw-headline-l: 700; --lh-headline-l: 1.29;
  --fs-headline-m: 24px;  --fw-headline-m: 700; --lh-headline-m: 1.33;
  --fs-headline-s: 20px;  --fw-headline-s: 600; --lh-headline-s: 1.4;
  --fs-title-l:   18px;   --fw-title-l:   600;  --lh-title-l: 1.33;
  --fs-title-m:   16px;   --fw-title-m:   600;  --lh-title-m: 1.50;
  --fs-title-s:   14px;   --fw-title-s:   600;  --lh-title-s: 1.43;
  --fs-body-l:    16px;   --fw-body-l:    400;  --lh-body-l: 1.50;
  --fs-body-m:    14px;   --fw-body-m:    400;  --lh-body-m: 1.43;
  --fs-body-s:    12px;   --fw-body-s:    400;  --lh-body-s: 1.33;
  --fs-label-l:   14px;   --fw-label-l:   600;
  --fs-label-m:   12px;   --fw-label-m:   500;
  --fs-label-s:   11px;   --fw-label-s:   500;

  --fs-hero:   72px;      --fw-hero:      800;
  --fs-title:  42px;      --fw-title-wm:  800;

  /* ── Spacing ─────────────────────────────────────────── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-field-gap: 12px;

  /* ── Radii ───────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 36px;
  --r-full: 999px;

  /* ── Elevation ───────────────────────────────────────── */
  --elev-low:   0 1px 2px rgba(0,0,0,0.4);
  --elev-mid:   0 4px 12px rgba(0,0,0,0.45);
  --elev-high:  0 10px 28px rgba(0,0,0,0.55);
  --elev-cta:   0 4px 20px rgba(124,58,237,0.40);
}

html, body {
  background: var(--bg-gradient);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}