/* ============================================================
   DIA v6 — design tokens
   Cool, high-contrast technology palette.
   Blue = product · cyan = live system · green = completed ·
   orange = attention. Every colour on the site comes from here.
   ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --page-bg: #F7F9FC;
  --surface: #FFFFFF;
  --surface-soft: #EEF3F8;
  --surface-blue: #EAF2FF;
  --surface-sunken: #E4EBF3;

  /* ---------- Text ---------- */
  --text-primary: #101820;
  --text-secondary: #5C6975;
  /* darkened from the brief's #82909D so small labels clear AA (4.6:1 on the page) */
  --text-muted: #67737F;
  --text-on-dark: #F7FAFC;
  --text-on-dark-soft: #AAB7C4;

  /* ---------- Borders ---------- */
  --border-soft: rgba(16, 24, 32, 0.10);
  --border-medium: rgba(16, 24, 32, 0.16);

  /* ---------- Brand ---------- */
  --primary: #155EEF;
  --primary-hover: #004EEB;
  --primary-dark: #123EA7;
  --primary-soft: rgba(21, 94, 239, 0.10);

  --cyan: #06B6D4;
  --cyan-soft: #CFFAFE;
  --orange: #F97316;
  --orange-soft: #FFEDD5;

  --success: #16A36A;
  --success-soft: rgba(22, 163, 106, 0.12);
  --warning: #B45309;        /* text-safe amber (5.0:1 on white) */
  --error: #D92D20;
  --danger: var(--error);

  /* ---------- Dark ---------- */
  --dark: #0B1320;
  --dark-surface: #121D2C;
  --dark-border: rgba(255, 255, 255, 0.10);
  --dark-text: #F7FAFC;
  --dark-muted: #AAB7C4;
  --dark-section: var(--dark);

  /* ---------- Type ---------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.3rem, 1.6rem + 2.5vw, 3.4rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.42vw, 1.45rem);
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1.01rem + 0.26vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --fw-display: 750;
  --fw-title: 700;
  --fw-nav: 550;
  --fw-body: 420;
  --fw-btn: 600;
  --fw-label: 600;

  --lh-display: 1.06;
  --lh-title: 1.14;
  --lh-body: 1.55;

  --ls-display: -0.03em;
  --ls-title: -0.022em;
  --ls-eyebrow: 0.08em;

  --measure: 34rem;
  --measure-hero: 42rem;

  /* ---------- Spacing ---------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 2.5rem;
  --s8: 3.5rem;
  --s9: 5rem;

  --section-y: 112px;
  --section-y-compact: 72px;
  --section-y-major: 128px;

  --gutter: clamp(1.25rem, 0.7rem + 2.2vw, 2.25rem);
  --maxw: 1360px;
  --maxw-wide: 1560px;
  --maxw-text: 46rem;

  --header-h: 68px;

  /* ---------- Radius ---------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --sh-xs: 0 1px 2px rgba(16, 24, 32, 0.05);
  --sh-sm: 0 2px 8px rgba(16, 24, 32, 0.06);
  --sh-md: 0 6px 22px rgba(16, 24, 32, 0.08);
  --sh-lg: 0 14px 44px rgba(16, 24, 32, 0.10);
  --sh-xl: 0 26px 70px rgba(16, 24, 32, 0.13);
  --sh-blue: 0 8px 24px rgba(21, 94, 239, 0.26);
  --sh-focus: 0 0 0 4px rgba(21, 94, 239, 0.22);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 130ms var(--ease);
  --t-base: 240ms var(--ease);
  --t-slow: 480ms var(--ease-out);
}

/* ---------- Large desktop scale ----------
   Prevent the site from looking like a 1320px island on 1920–2560px screens. */
@media (min-width: 1600px) {
  :root {
    --maxw: 1460px;
    --maxw-wide: 1680px;
    --fs-display: clamp(3.4rem, 2.15rem + 1.35vw, 4.35rem);
    --fs-h2: clamp(2.25rem, 1.7rem + 0.8vw, 2.9rem);
    --fs-lead: 1.25rem;
    --fs-body: 1.1rem;
    --section-y: 124px;
    --section-y-compact: 82px;
    --section-y-major: 140px;
  }
}

@media (min-width: 2200px) {
  :root {
    --maxw: 1580px;
    --maxw-wide: 1840px;
    --gutter: 2.75rem;
  }
}

@media (max-width: 768px) {
  :root {
    --section-y: 66px;
    --section-y-compact: 44px;
    --section-y-major: 78px;
    --header-h: 60px;
  }
}