/* Mirrors ats-fit-frontend/src/styles.scss :root / @theme — update both when branding changes. */

:root {
  --ats-background: #f8fafc;
  --ats-foreground: #0f172a;

  --ats-primary: #2563eb;
  --ats-primary-dark: #1d4ed8;
  --ats-primary-darker: #1e40af;
  --ats-primary-darkest: #1e3a8a;
  --ats-primary-light: #3b82f6;
  --ats-primary-lighter: #93c5fd;
  --ats-primary-lightest: #bfdbfe;
  --ats-primary-bg: #eff6ff;

  --ats-slate-900: #0f172a;
  --ats-slate-800: #1e293b;
  --ats-slate-700: #374151;
  --ats-slate-500: #64748b;
  --ats-slate-400: #94a3b8;
  --ats-slate-300: #cbd5e1;
  --ats-slate-200: #e2e8f0;
  --ats-slate-100: #f1f5f9;
  --ats-slate-50: #f8fafc;

  --ats-green-700: #15803d;
  --ats-green-600: #16a34a;
  --ats-green-500: #10b981;
  --ats-green-400: #059669;
  --ats-green-100: #dcfce7;
  --ats-green-50: #f0fdf4;
  --ats-green-border: #bbf7d0;

  --ats-amber-600: #d97706;
  --ats-amber-500: #f59e0b;
  --ats-amber-400: #b45309;
  --ats-amber-bg: #fffbeb;
  --ats-amber-border: #fde68a;
  --ats-amber-bg-light: #fff7ed;
  --ats-amber-border-light: #fed7aa;
  --ats-amber-dark: #c2410c;
  --ats-amber-darkest: #78350f;

  --ats-purple: #7c3aed;
  --ats-teal: #0891b2;
  --ats-red: #ef4444;

  --ats-accent-purple-soft: hsl(250 100% 97%);
  --ats-accent-purple-border: hsl(255 91% 91%);
  --ats-accent-purple-strong: hsl(263 47% 40%);

  --ats-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04);
  --ats-shadow-header: 0 1px 3px rgba(0, 0, 0, 0.04);
  --ats-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.08);
  --ats-shadow-tips: 0 1px 4px rgba(37, 99, 235, 0.06);

  --ats-hero-gradient: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #2563eb 100%);

  --ats-radius-card: 1rem;
  --ats-radius-pill: 9999px;
  --ats-radius-btn: 0.75rem;

  --ats-max-width: 1280px;

  /* HSL slots (aligned with Angular @theme) — use as hsl(var(--name)) */
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 221 83% 53%;
  --radius: 0.75rem;

  /* Aliases for parity with app Tailwind @theme */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--ring));
  --color-border: hsl(var(--border));
  --color-ring: hsl(var(--ring));
}