:root {
  /* Surfaces */
  --bg-primary: #FAFAF7;
  --bg-section: #F2EFE8;
  --bg-card: #FFFFFF;

  /* Brand */
  --brand-primary: #1E40AF;
  --brand-hover: #1D3FAA;
  --brand-soft: #DBEAFE;

  /* Accents */
  --accent-orange: #F97316;
  --accent-warm: #FED7AA;

  /* Text */
  --text-primary: #1F2937;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-inverse: #FFFFFF;

  /* Status */
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;

  /* Borders */
  --border-soft: #E5E7EB;
  --border-strong: #D1D5DB;

  /* Shadows */
  --shadow-clay: 0 4px 16px rgba(30, 64, 175, 0.08);
  --shadow-clay-lg: 0 8px 28px rgba(30, 64, 175, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

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

  /* Typography scale */
  --fs-xs: 14px;
  --fs-sm: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --header-h: 72px;

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

  /* Z-index scale */
  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}

[data-theme="dark"] {
  --bg-primary: #0F172A;
  --bg-section: #1E293B;
  --bg-card: #1E293B;
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-inverse: #0F172A;
  --border-soft: #334155;
  --border-strong: #475569;
  --brand-soft: #1E3A8A;
  --shadow-clay: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-clay-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
  --accent-warm: #7C2D12;
}