:root{
  --blue:#3b82f6;
  --blue-100:#e6f0ff;
  --purple:#6c2bd9;
  --purple-100:#efe9ff;
  --black:#000000;
  --white:#ffffff;
  --grey-050:#fafafa;
  --grey-100:#f3f3f3;
  --grey-300:#e5e5e5;
  --grey-700:#4d4d4d;
  --grey-900:#1a1a1a;

  /* Brand colors */
  --primary:var(--purple);
  --primary-weak:var(--purple-100);
  --accent:var(--blue);
  --accent-weak:var(--blue-100);

  /* Layout */
  --container-max: 1200px;                 /* mock shows centered content */
  --container-pad: clamp(16px, 3.2vw, 32px);

  /* Typography */
  --h1: clamp(28px, 4vw, 44px);
  --h2: clamp(22px, 3.2vw, 28px);
  --h3: clamp(18px, 2.6vw, 22px);

  /* UI + text */
  --text:var(--grey-900);
  --muted:var(--grey-700);
  --surface:var(--white);
  --surface-alt:var(--grey-100);

  /* Radii & shadows */
  --radius: 12px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
}

/* (No large-screen caps anymore) */