:root {
  --color-brand-50: #eef4ff;
  --color-brand-100: #d9e6ff;
  --color-brand-400: #4d7cff;
  --color-brand-500: #2f5bff;
  --color-brand-600: #2348f5;
  --color-brand-700: #1a38c4;

  --color-gf-coral: #ff6b4a;
  --color-gf-coral-muted: rgba(255, 107, 74, 0.12);
  --color-meta-blue: #0081fb;
  --color-wa-green: #25d366;

  --surface-dark-base: #060912;
  --surface-dark-raised: #0c101c;
  --surface-dark-overlay: #121829;
  --surface-dark-border: rgba(255, 255, 255, 0.08);
  --surface-dark-border-strong: rgba(255, 255, 255, 0.14);

  --surface-light-base: #f7f8fb;
  --surface-light-card: #ffffff;
  --surface-light-muted: #eef1f6;

  --text-primary: #0b1220;
  --text-secondary: #4b5568;
  --text-muted: #6b7280;
  --text-on-dark: #f3f4f6;
  --text-on-dark-muted: #9ca3af;

  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", monospace;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.12);
  --shadow-elevated: 0 20px 50px -20px rgba(15, 23, 42, 0.35);

  --motion-fast: 150ms ease;
  --motion-base: 250ms ease;
}