/* ── Breakpoints (reference only — use in @media rules, not var()) ──────────
   sm:  640px   portrait phones landscape / small tablets
   md:  768px   tablets
   lg:  1024px  small laptops
   xl:  1280px  desktops
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Design System Tokens ─────────────────────────────────────────────────── */
:root {
  /* ── Brand / Primary ─────────────────────────────────────────────────── */
  --color-primary:        #6366f1;
  --color-primary-dark:   #4f46e5;
  --color-primary-tint:   #eef2ff;
  --gradient-primary:     linear-gradient(135deg, #6366f1, #8b5cf6);
  --focus-ring:           0 0 0 3px rgba(99, 102, 241, 0.10);
  --focus-ring-strong:    0 0 0 3px rgba(99, 102, 241, 0.18);

  /* ── Neutrals ─────────────────────────────────────────────────────────── */
  --color-bg:             #f1f5f9;   /* page background */
  --color-white:          #ffffff;
  --color-surface:        #ffffff;   /* card / surface */
  --color-surface-alt:    #f8fafc;   /* alt surface, panel headers */
  --color-surface-mid:    #f1f5f9;   /* legacy alias */
  --color-border:         #e2e8f0;   /* default border */
  --color-border-light:   #f1f5f9;   /* subtle border */
  --color-border-mid:     #e2e8f0;   /* legacy alias */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --color-text:           #1e293b;   /* text primary */
  --color-text-body:      #334155;   /* body */
  --color-text-mid:       #475569;   /* muted */
  --color-text-light:     #64748b;   /* light */
  --color-text-faint:     #94a3b8;   /* faint */

  /* ── Hero / Dark surfaces ─────────────────────────────────────────────── */
  --color-navy:           #0f172a;
  --color-navy-mid:       #1e293b;
  --color-navy-light:     #334155;

  /* ── Semantic colors ─────────────────────────────────────────────────── */
  --color-success:        #16a34a;
  --color-success-bg:     #dcfce7;
  --color-success-soft:   #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-danger:         #dc2626;
  --color-danger-bg:      #fee2e2;
  --color-danger-soft:    #fef2f2;
  --color-danger-border:  #fecaca;

  --color-warning:        #f59e0b;
  --color-warning-bg:     #fefce8;
  --color-warning-soft:   #fffbeb;
  --color-warning-border: #fde68a;

  --color-info:           #2563eb;
  --color-info-bg:        #dbeafe;
  --color-info-soft:      #eff6ff;
  --color-info-border:    #bfdbfe;

  --color-purple:         #7c3aed;
  --color-purple-bg:      #ede9fe;

  --color-error:          #dc2626;   /* legacy alias to danger */
  --color-accent:         #6366f1;   /* legacy alias to primary */

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius-sm:   6px;     /* small */
  --radius-md:   8px;     /* medium / inputs / buttons */
  --radius-lg:   12px;    /* cards */
  --radius-xl:   16px;    /* large sections */
  --radius-pill: 999px;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --section-pad-y: 5rem;
  --section-pad-x: 1.5rem;
  --grid-gap:      1.25rem;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-card:   0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-modal:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:     0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', monospace;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* global guard against horizontal overflow */
}

body {
  font-family: var(--font-body);
  color: var(--color-text-body);
  background: var(--color-bg);
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }