/* ============================================================
   DESIGN TOKENS — Harshwal AI
   All CSS custom properties in one place
   ============================================================ */
:root {
  /* Colors */
  --white: #ffffff;
  --bg-page: #fafbfd;
  --bg-section-alt: #f4f6fa;
  --bg-card: #ffffff;
  --bg-card-alt: #f8f9fc;
  --bg-input: #f1f3f8;
  --bg-dark: #0c1427;
  --bg-dark-card: #131c33;

  /* Borders */
  --border-100: #f0f1f5;
  --border-200: #e3e6ee;
  --border-300: #d1d5e0;

  /* Primary — corporate blue */
  --primary-900: #1e2a5e;
  --primary-800: #1e3a8a;
  --primary-700: #1d4ed8;
  --primary-600: #2563eb;
  --primary-500: #3b82f6;
  --primary-400: #60a5fa;
  --primary-100: #dbeafe;
  --primary-50: #eff6ff;

  /* Indigo */
  --indigo-700: #4338ca;
  --indigo-600: #4f46e5;
  --indigo-500: #6366f1;
  --indigo-100: #e0e7ff;
  --indigo-50: #eef2ff;

  /* Green */
  --green-700: #047857;
  --green-600: #059669;
  --green-500: #10b981;
  --green-100: #d1fae5;
  --green-50: #ecfdf5;

  /* Amber */
  --amber-600: #d97706;
  --amber-100: #fef3c7;

  /* Red */
  --red-500: #ef4444;
  --red-100: #fee2e2;

  /* Text */
  --text-900: #0f172a;
  --text-800: #1e293b;
  --text-700: #334155;
  --text-500: #64748b;
  --text-400: #94a3b8;
  --text-300: #cbd5e1;
  --text-on-dark: #e2e8f0;
  --text-muted-dark: #94a3b8;

  /* Typography */
  --font: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --max-w: 1200px;
  --section-y: clamp(72px, 10vw, 128px);
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 1px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 10px 32px rgba(15,23,42,0.07), 0 2px 8px rgba(15,23,42,0.04);
  --shadow-xl: 0 20px 50px rgba(15,23,42,0.09), 0 4px 12px rgba(15,23,42,0.04);
  --shadow-card-hover: 0 24px 56px rgba(15,23,42,0.1), 0 6px 16px rgba(15,23,42,0.05);
  --shadow-primary: 0 4px 16px rgba(37,99,235,0.2);
}