/* ============================================================
   CATALYST — Design Tokens & CSS Custom Properties
   SAASART Light Theme (Orange & Mint)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,300;1,14..32,400&display=swap');

:root {
  /* ── BACKGROUNDS ─────────────────────────────────────────── */
  --bg-void:     #fcfaf6;
  --bg-dark:     #f7f4eb;
  --bg-deep:     #f0ebd9;
  --bg-mid:      #e5dec5;
  --bg-surface:  #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover:    #fffdfa;

  /* ── STEEL / SILVER ──────────────────────────────────────── */
  --steel-darker: #0f172a;
  --steel-dark:   #1e293b;
  --steel-mid:    #334155;
  --steel-light:  #475569;
  --silver-dim:   #64748b;
  --silver:       #94a3b8;
  --silver-bright:#cbd5e1;
  --silver-pure:  #e2e8f0;

  /* ── ACCENT BLUE (Now Orange) ────────────────────────────── */
  --blue-deep:    #c2410c;
  --blue-dim:     #ea580c;
  --blue:         #f97316;
  --blue-bright:  #fb923c;
  --blue-pale:    #fdba74;
  --blue-glow:    rgba(249, 115, 22, 0.25);
  --blue-subtle:  rgba(249, 115, 22, 0.05);
  --blue-tint:    rgba(249, 115, 22, 0.1);

  /* ── TEXT ────────────────────────────────────────────────── */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #64748b;
  --text-accent:    #f97316;

  /* ── GLASS / SURFACE ─────────────────────────────────────── */
  --glass-bg:            rgba(255, 255, 255, 0.75);
  --glass-bg-light:      rgba(255, 255, 255, 0.9);
  --glass-border:        rgba(15, 23, 42, 0.06);
  --glass-border-strong: rgba(15, 23, 42, 0.12);
  --glass-border-accent: rgba(249, 115, 22, 0.2);
  --glass-shadow:        0 8px 30px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.02);
  --glass-shadow-hover:  0 20px 50px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(249, 115, 22, 0.15);
  --glass-inset:         inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(15, 23, 42, 0.02);

  /* ── METALLIC GRADIENTS ──────────────────────────────────── */
  --metallic-body:     #fcfaf6;
  --metallic-card:     linear-gradient(145deg, rgba(110, 115, 125, 0.9) 0%, rgba(80, 85, 95, 0.8) 100%);
  --metallic-card-hov: linear-gradient(145deg, rgba(120, 125, 135, 1) 0%, rgba(90, 95, 105, 0.9) 100%);
  --metallic-header:   rgba(252, 250, 246, 0.85);
  --metallic-shine:    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
  --metallic-edge:     linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(249, 115, 22, 0.05) 50%, rgba(255, 255, 255, 0.6) 100%);

  /* ── BUTTONS ─────────────────────────────────────────────── */
  --btn-bg:        linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  --btn-shadow:    0 6px 16px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  --btn-shadow-hv: 0 10px 24px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --btn-ghost-bg:  rgba(249, 115, 22, 0.08);
  --btn-ghost-bdr: rgba(249, 115, 22, 0.3);
  --btn-ghost-hv:  rgba(249, 115, 22, 0.15);

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  /* ── SPACING ─────────────────────────────────────────────── */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  30px;
  --r-full: 9999px;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   260ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   420ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-smooth: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-below:  -1;
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 50;
  --z-header:  100;
  --z-modal:   200;
  --z-toast:   300;
}