/* ============================================================
   Truwealth IT Readiness Assessment
   Design Tokens — aligned with the truwealthgroup.co.za brand
   system (Apple-dark theme, electric blue, Mulish/IBM Plex Mono).
   ============================================================ */

:root {
  /* --- Core neutrals --- */
  --tw-black: #000000;      /* page background */
  --tw-paper: #0a0a0c;      /* section background (alt) */
  --tw-paper-2: #141417;    /* card background (top of gradient) */
  --tw-ink: #f5f5f7;        /* primary text on dark */
  --tw-ink-2: #a1a1a6;      /* secondary text */
  --tw-ink-3: #6e6e73;      /* tertiary / muted text */
  --tw-line: rgba(255, 255, 255, 0.1);
  --tw-line-soft: rgba(255, 255, 255, 0.06);
  --tw-white: #ffffff;

  /* --- Electric blue — primary accent --- */
  --tw-electric: #2997ff;
  --tw-electric-deep: #1d6fde;
  --tw-electric-bright: #7dd3fc;
  --tw-electric-pale: #b8e5ff;
  --tw-electric-glow: rgba(41, 151, 255, 0.55);

  /* --- Semantic tokens --- */
  --color-bg: var(--tw-black);
  --color-text: var(--tw-ink);
  --color-text-muted: var(--tw-ink-2);
  --color-accent: var(--tw-electric);

  /* --- Typography --- */
  --font-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-hero: clamp(2.75rem, 7.4vw, 6rem);
  --fs-title: clamp(2.1rem, 4.2vw, 3.25rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.375rem);
  --fs-body: 1rem;
  --fs-eyebrow: 0.8125rem;

  /* --- Spacing & layout --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8.75rem;
  --container-max: 1200px;
  --radius-pill: 100px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1s;

  /* --- Elevation --- */
  --shadow-glow: 0 0 40px var(--tw-electric-glow);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.45);
}