/*
 * Yuanfan premium SaaS design tokens
 * Principle: neutral-first surfaces with one primary interaction blue.
 */
:root {
  --color-primary-50: #eef5ff;
  --color-primary-100: #d9e9ff;
  --color-primary-200: #b9d7ff;
  --color-primary-300: #8bbdff;
  --color-primary-400: #5599ff;
  --color-primary-500: #0066ff;
  --color-primary-600: #0052cc;
  --color-primary-700: #003f99;
  --color-primary-800: #002b66;
  --color-primary-900: #001733;

  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-400: #94a3b8;
  --color-secondary-500: #64748b;
  --color-secondary-600: #475569;
  --color-secondary-700: #334155;
  --color-secondary-800: #1e293b;
  --color-secondary-900: #0f172a;

  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-light: var(--color-primary-100);
  --color-primary-subtle: var(--color-primary-50);
  --color-primary-rgb: 0, 102, 255;
  --color-secondary: var(--color-secondary-500);
  --color-secondary-hover: var(--color-secondary-600);
  --color-secondary-rgb: 100, 116, 139;
  --color-accent: var(--color-primary-500);
  --color-accent-rgb: 0, 102, 255;
  --color-brand-ink: var(--color-neutral-900);

  --color-background: var(--color-neutral-50);
  --color-bg: var(--color-background);
  --color-surface: #ffffff;
  --color-surface2: #f6f8fb;
  --color-surface-elevated: rgba(255, 255, 255, 0.88);
  --color-border: rgba(17, 24, 39, 0.1);
  --color-border2: rgba(17, 24, 39, 0.16);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text: var(--color-text-primary);
  --color-muted: var(--color-text-secondary);

  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-sm: 0 8px 24px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 18px 50px rgba(17, 24, 39, 0.1);
  --shadow-lg: 0 30px 90px rgba(17, 24, 39, 0.12);
  --shadow-glow-primary: 0 16px 36px rgba(var(--color-primary-rgb), 0.2);
  --shadow-glow-secondary: 0 18px 42px rgba(17, 24, 39, 0.08);
  --shadow-surface: var(--shadow-md);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --type-hero: clamp(2.95rem, 4.2vw, 4.6rem);
  --type-h2: clamp(2.25rem, 4vw, 4.5rem);
  --type-lead: clamp(1.08rem, 1.6vw, 1.28rem);
  --type-body: 1rem;
}