/* ==========================================================================
   Design tokens
   The single source of truth for colour, type, space and motion.
   Every other stylesheet consumes these — no raw hex outside this file.
   ========================================================================== */

@font-face {
  font-family: Centra;
  src: url('../assets/fonts/Centra/CentraNo2-Book.woff2') format('woff2'),
       url('../assets/fonts/Centra/CentraNo2-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Centra;
  src: url('../assets/fonts/Centra/CentraNo2-Medium.woff2') format('woff2'),
       url('../assets/fonts/Centra/CentraNo2-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Centra;
  src: url('../assets/fonts/Centra/CentraNo2-Bold.woff2') format('woff2'),
       url('../assets/fonts/Centra/CentraNo2-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Palette ---------------------------------------------------------- */
  --ink: #15172a;
  --ink-raised: #1d2038;
  --ink-sunken: #0d0f1c;
  --paper: #f7f1e6;
  --mist: #e2e7de;
  --acid: #d8ff59;
  --blue: #5971ff;
  --blue-deep: #3b4bd8;
  --coral: #f1775d;
  --brass: #d8b25e;

  /* Foreground colours, chosen so body copy clears WCAG AA on its surface.
     --coral and --blue are the brand colours and stay as they are on dark
     surfaces and in non-text roles; the deepened pair below is what gets used
     for type on paper, where the originals only reach ~2.5:1 and ~3.5:1. */
  --muted: #5a5d69;              /* on --paper / --mist            5.4:1 */
  --coral-ink: #ad3f26;          /* coral, small text on paper/mist 4.7:1 */
  --coral-display: #cf5334;      /* coral, display text on paper    3.7:1 */
  --blue-ink: #3b4bd8;           /* blue, as text on paper          5.7:1 */
  --on-ink: rgba(247, 241, 230, 0.82);
  --on-ink-strong: var(--paper);
  --on-blue: #dfe2f5;            /* on --blue-deep                 5.1:1 */
  --on-coral: #2b2e45;           /* on --coral                     4.8:1 */
  --error-light: #ffb4a2;        /* error text on --blue-deep      6.0:1 */

  --rule: rgba(21, 23, 42, 0.2);
  --rule-strong: rgba(21, 23, 42, 0.42);
  --rule-light: rgba(247, 241, 230, 0.24);
  --rule-light-strong: rgba(247, 241, 230, 0.45);

  /* --- Typography ------------------------------------------------------- */
  --font-sans: Centra, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

  --text-2xs: 0.625rem;
  --text-xs: 0.7rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9rem;
  --text-base: clamp(0.95rem, 0.91rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);

  /* Display sizes. Minimums are tuned to fit a 320px viewport without
     hyphenation or overflow; maximums hold the editorial scale on desktop. */
  --display-xs: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
  --display-sm: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  --display-md: clamp(2.6rem, 1.55rem + 5.2vw, 6.4rem);
  --display-lg: clamp(3.1rem, 1.6rem + 7.4vw, 8.6rem);
  --display-xl: clamp(3.5rem, 1.5rem + 10vw, 11rem);

  --tracking-display: -0.055em;
  --tracking-label: 0.1em;
  --leading-display: 0.86;
  --leading-body: 1.55;

  /* --- Space ------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3rem, 6vw, 5.5rem);
  --space-3xl: clamp(4rem, 9vw, 9rem);

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --measure: 34rem;

  /* --- Structure -------------------------------------------------------- */
  --rail: 5.45rem;               /* width of the fixed desktop index rail */
  --border-hair: 1px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.28s;
  --dur-slow: 0.65s;

  /* --- Focus ------------------------------------------------------------ */
  --focus-ring: var(--blue-ink);
  --focus-ring-offset: var(--paper);
}

/* Dark sections opt in by redefining these variables rather than restyling
   every control inside them: the focus ring needs a light colour, and the
   accent mark can go back to full-strength coral, which only needs deepening
   when it sits on paper. */
.on-dark {
  --focus-ring: var(--acid);
  --focus-ring-offset: var(--ink);
  --accent-mark: var(--coral);
}

@media (max-width: 60rem) {
  :root {
    --rail: 0rem;
  }
}