/* Turnload design tokens — source of truth: design-reference/turnload/DESIGN.md */

@font-face { font-family: "Switzer"; src: url("fonts/Switzer-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* colour */
  --accent: #2541e6;
  --accent-hover: #1d34c2;
  --accent-soft: #dfe4fd;
  --accent-on-dark: #95a4f6;
  --ink: #17171a;
  --paper: #ffffff;
  --cream: #ece9e3;
  --error: #b42318;
  --error-soft: #fbeceb;
  --success: #1a6b43;
  --success-soft: #e8f3ed;

  /* ink opacity ladder (use on paper and cream) */
  --ink-72: color-mix(in srgb, var(--ink) 72%, transparent);
  --ink-64: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-50: color-mix(in srgb, var(--ink) 50%, transparent);
  --ink-15: color-mix(in srgb, var(--ink) 15%, transparent);
  --ink-6:  color-mix(in srgb, var(--ink) 6%, transparent);

  /* type */
  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --fs-display-xl: clamp(40px, 6vw, 72px);
  --fs-display-l: clamp(34px, 4.6vw, 56px);
  --fs-display-m: clamp(28px, 3.4vw, 40px);
  --fs-heading: clamp(21px, 2vw, 24px);
  --fs-stat: clamp(36px, 4vw, 48px);
  --fs-lead: clamp(18px, 1.6vw, 20px);
  --fs-body: clamp(16px, 1.1vw, 17px);
  --fs-body-sm: 15px;
  --fs-label: 14px;
  --fs-caption: 13px;
  --track-display-xl: -0.04em;
  --track-display-l: -0.035em;
  --track-display-m: -0.03em;
  --track-heading: -0.02em;

  /* space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;
  --section-y: var(--s-16);
  --gutter: 20px;

  /* shape */
  --radius: 2px;
  --line: 1px solid var(--ink-15);
  --line-control: 1px solid var(--ink-50);
  --shadow-float: 0 16px 40px -12px rgba(23, 23, 26, .22);

  /* layout */
  --maxw: 1200px;
  --measure: 62ch;

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-color: 150ms;
  --t-border: 200ms;
  --t-move: 300ms;
}

@media (min-width: 768px)  { :root { --section-y: var(--s-24); --gutter: 32px; } }
@media (min-width: 1024px) { :root { --section-y: var(--s-32); --gutter: 48px; } }

/* dark section: <section class="on-dark"> */
.on-dark {
  background: var(--ink);
  color: #fff;
  --ink-72: rgba(255, 255, 255, .72);
  --ink-64: rgba(255, 255, 255, .64);
  --ink-50: rgba(255, 255, 255, .5);
  --ink-15: rgba(255, 255, 255, .15);
  --ink-6:  rgba(255, 255, 255, .06);
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}