/* ============================================================
   01 · SETTINGS · Tokens
   Design tokens (CSS custom properties). No selectors that output CSS.
   ============================================================ */

:root {
  /* Colour — neutral (brand: cream #F4F2EE · black #000) */
  --bg: #F4F2EE;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-strong: #ECE9E2;
  --border: rgba(10, 10, 15, 0.08);
  --border-strong: rgba(10, 10, 15, 0.16);
  --text: #0A0A0F;
  --text-2: #52525B;
  --text-3: #A1A1AA;
  --ink: #0A0A0F;

  /* Colour — accents (brand blue #1E5ED5) */
  --accent: #1E5ED5;
  --accent-soft: #5A86E0;
  --accent-deep: #16439E;
  --on-accent: #FFFFFF;

  /* Effects */
  --glow: 0 10px 32px rgba(30, 94, 213, 0.45);
  --glow-strong: 0 16px 56px rgba(30, 94, 213, 0.65);
  --shadow-pop: 0 24px 60px -20px rgba(10, 10, 15, 0.18);

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Typography */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", monospace;
}