/*
 * Design tokens — A3 Modern Editorial Copper
 *
 * Colour tokens are NOT defined here: they are served from /theme.css,
 * generated from Website Management → Appearance (validated for contrast).
 * This file holds the fixed, non-editable parts of the system: type, space,
 * layout, radius, elevation and motion. Templates and components must use
 * these custom properties — never literal values.
 */

/* Self-hosted fonts (SIL Open Font License; see /assets/fonts/LICENSE-*.txt).
   Latin subsets of the official variable fonts:
   Newsreader — Production Type (github.com/productiontype/Newsreader)
   Inter      — Rasmus Andersson (github.com/rsms/inter, v4.1) */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Fallback colours (overridden by /theme.css). Kept identical to ThemeTokens defaults. */
  --color-navy: #0F1C2E;
  --color-copper: #B26B3D;
  --color-copper-text: #8F4E25;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F7F8;
  --color-surface: #FFFFFF;
  --color-text: #1C2128;
  --color-text-muted: #4F5A66;
  --color-border: #DEE1E5;
  --color-button-bg: #0F1C2E;
  --color-button-text: #FFFFFF;
  --color-link: #8F4E25;
  --color-on-dark: #F4F5F7;
  --color-on-dark-muted: #B9C1CC;

  /* Derived (not editable) */
  --color-focus: var(--color-copper);
  --color-danger: #A3261B;
  --color-info-bg: color-mix(in srgb, var(--color-navy) 6%, var(--color-surface));

  /* Typography — families (self-hosted WOFF2 above; see docs/design/TYPOGRAPHY.md) */
  --font-serif: "Newsreader", "Source Serif 4", "Iowan Old Style", "Charter", "Georgia", serif;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (min @ 360px → max @ 1440px) */
  --step--1: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.10rem);
  --step-1:  clamp(1.15rem, 1.09rem + 0.30vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.60vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.42rem + 1.05vw, 2.35rem);
  --step-4:  clamp(2.05rem, 1.65rem + 1.80vw, 3.25rem);
  --step-5:  clamp(2.50rem, 1.85rem + 2.90vw, 4.50rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.65;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.14em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --measure: 66ch;

  /* Spacing scale (fluid) */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.10vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.47rem + 0.15vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.70rem + 0.25vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.94rem + 0.30vw, 1.25rem);
  --space-m:   clamp(1.50rem, 1.40rem + 0.45vw, 1.88rem);
  --space-l:   clamp(2.00rem, 1.85rem + 0.70vw, 2.50rem);
  --space-xl:  clamp(3.00rem, 2.70rem + 1.40vw, 4.00rem);
  --space-2xl: clamp(4.00rem, 3.40rem + 2.80vw, 6.50rem);
  --space-3xl: clamp(5.00rem, 4.00rem + 4.50vw, 9.00rem);

  /* Layout */
  --container-max: 76rem;
  --container-wide: 88rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);   /* 16px minimum at phone width */
  --header-height: 4.75rem;

  /* Shape & elevation — restrained */
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-pill: 999px;
  --border-width: 1px;
  --rule-width: 2px;
  --shadow-menu: 0 12px 32px -12px rgb(15 28 46 / 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;

  /* Layers */
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}