/* Design Tokens (colors, radii, shadows) */
:root{
  /* Base (light) */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --muted: #6b7789;
  --text: #1f2a37;
  --line: #e5e9f0;
  --brand: #0ea5e9;   /* primary accent */
  --brand-2: #22c55e; /* secondary accent */
  --warn: #f59e0b;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(17,24,39,.06);

  /* Header (glass) */
  --hd-bg: rgba(255,255,255,.16);
  --hd-bg-scrolled: rgba(255,255,255,.22);
  --hd-border: rgba(255,255,255,.45);
  --hd-shadow: 0 6px 24px rgba(0,0,0,.12);
  --hd-link: #0b0d12;
  --hd-link-muted: #4b5563;
  --hd-link-hover: #0077cc;
  --hd-pill-bg: #fff;
  --hd-pill-border: rgba(0,0,0,.08);

  /* Hero (light + glass) */
  --ml-bg-grad: linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
  --ml-text: #0b0d12;
  --ml-sub: #586172;
  --ml-cta-grad-1: #eaf6ff;
  --ml-cta-grad-2: #f8fffb;
}