/* ==========================================================
   Design tokens — colour, type, spacing, motion
   Light is the base; dark is redefined at token level only.
   ========================================================== */

:root {
  /* --- surfaces & ink --- */
  --paper: #ffffff;
  --surface: #f5f8ff;
  --surface-2: #e9f0fd;
  --surface-3: #d8e5fb;
  --blue: #4170e8;
  --blue-dark: #2c58cf;
  --blue-deep: #1b3888;
  --blue-light: #8aa9f4;
  --blue-mist: #eef3fd;
  --ink: #101425;
  --ink-soft: #545a74;
  --line: rgba(65, 112, 232, 0.16);
  --line-strong: rgba(65, 112, 232, 0.34);
  --shadow-sm: 0 4px 14px -6px rgba(27, 56, 136, 0.18);
  --shadow-md: 0 18px 38px -20px rgba(27, 56, 136, 0.34);
  --shadow-lg: 0 30px 60px -28px rgba(27, 56, 136, 0.42);
  --on-blue: #ffffff;

  /* The final CTA band keeps its own pair so it reads dark in both themes. */
  --cta-bg: #1b3888;
  --cta-fg: #ffffff;
  --cta-btn-bg: #ffffff;
  --cta-btn-fg: #1b3888;

  /* --- type --- */
  --font-display: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;

  --text-hero: clamp(2.35rem, 1.45rem + 4.1vw, 4.5rem);
  --text-h2: clamp(1.6rem, 1.28rem + 1.45vw, 2.45rem);
  --text-h3: clamp(1.12rem, 1.02rem + 0.45vw, 1.35rem);
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-small: 0.86rem;
  --text-eyebrow: 0.78rem;

  /* --- spacing --- */
  --space-section: clamp(3.75rem, 2.7rem + 4.2vw, 7rem);
  --space-lg: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
  --space-md: clamp(1.2rem, 1rem + 0.9vw, 1.9rem);
  --space-sm: clamp(0.6rem, 0.5rem + 0.4vw, 1rem);

  /* --- shape & motion --- */
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 720ms;
}

/* System dark, unless the visitor explicitly picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #080d1c;
    --surface: #0e1730;
    --surface-2: #142039;
    --surface-3: #1d2c4c;
    --blue: #7099f5;
    --blue-dark: #93b2f8;
    --blue-deep: #c3d5fd;
    --blue-light: #4d74cf;
    --blue-mist: #142039;
    --ink: #eef1fb;
    --ink-soft: #a3adcd;
    --line: rgba(112, 153, 245, 0.24);
    --line-strong: rgba(112, 153, 245, 0.46);
    --shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 18px 38px -20px rgba(0, 0, 0, 0.72);
    --shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, 0.8);
    --on-blue: #06101f;

    --cta-bg: #142039;
    --cta-fg: #eef1fb;
    --cta-btn-bg: #7099f5;
    --cta-btn-fg: #06101f;
  }
}

/* Explicit dark choice wins over a light OS setting */
:root[data-theme='dark'] {
  --paper: #080d1c;
  --surface: #0e1730;
  --surface-2: #142039;
  --surface-3: #1d2c4c;
  --blue: #7099f5;
  --blue-dark: #93b2f8;
  --blue-deep: #c3d5fd;
  --blue-light: #4d74cf;
  --blue-mist: #142039;
  --ink: #eef1fb;
  --ink-soft: #a3adcd;
  --line: rgba(112, 153, 245, 0.24);
  --line-strong: rgba(112, 153, 245, 0.46);
  --shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 18px 38px -20px rgba(0, 0, 0, 0.72);
  --shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, 0.8);
  --on-blue: #06101f;

  --cta-bg: #142039;
  --cta-fg: #eef1fb;
  --cta-btn-bg: #7099f5;
  --cta-btn-fg: #06101f;
}