/* ==========================================================================
   variables.css — design tokens
   --------------------------------------------------------------------------
   The single source of truth for the shipped theme. /config/theme.json mirrors
   these values and may override them at runtime via /js/theme.js.
   Never hard-code a colour, font, spacing or duration outside this file.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */
  --colour-primary: #800080;
  --colour-primary-hover: #FF02BF;
  --colour-secondary: #FF02BF;

  /*
    The accent is used as small text (eyebrows, note labels, link hover) on the
    alt background #f1ede7, which is the darkest light surface. It must stay at
    or below this lightness to clear 4.5:1 there. A brighter copper looks
    livelier in isolation and fails the contrast check on every banded section.
  */
  --colour-accent: #FF02BF;
  --colour-accent-hover: #800080;

  --colour-background: #faf8f5;
  --colour-background-alt: #000000;
  --colour-surface: #000000;
  --colour-surface-inverse: #212121;

  --colour-text: #d2d2d2;
  --colour-text-inverse: #F6F3EE;
  --colour-text-muted: #5E6B75;
  --colour-text-muted-inverse: #808080;

  --colour-border: #212121;
  --colour-border-strong: #212121;
  --colour-border-inverse: #808080;

  --colour-focus: #800080;
  --colour-success: #1f6b4f;
  --colour-warning: #8a5a10;
  --colour-danger: #9c2b2b;

  /*
    Contrast pairs. The colour that must sit on top of a filled primary or accent
    surface. These are derived, not brand choices, but they have to be tokens:
    the inverse context flips --colour-primary to a light tone, and anything
    hard-coded to the light text colour then disappears.
  */
  --colour-on-primary: var(--colour-text-inverse);
  --colour-on-accent: #FF02BF;

  /* Translucent overlays used for image treatments. */
  --overlay-scrim: linear-gradient(to top, rgb(10 14 18 / 78%) 0%, rgb(10 14 18 / 28%) 45%, rgb(10 14 18 / 6%) 100%);
  --overlay-veil: rgb(10 14 18 / 38%);

  /* --- Typography -------------------------------------------------------- */
  --font-heading: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-navigation: var(--font-body);
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --weight-heading: 400;
  --weight-heading-strong: 600;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --size-display: clamp(3rem, 7.5vw, 6.25rem);
  --size-h1: clamp(2.5rem, 5.5vw, 4.25rem);
  --size-h2: clamp(1.9rem, 3.6vw, 3rem);
  --size-h3: clamp(1.45rem, 2.2vw, 2rem);
  --size-h4: clamp(1.2rem, 1.5vw, 1.45rem);
  --size-body: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --size-lead: 0.9375rem;
  --size-lead-alt: 0.9375rem;
  --size-small: 0.9375rem;
  --size-eyebrow: 0.78125rem;

  --line-height-heading: 1.08;
  --line-height-title: 1.18;
  --line-height-body: 1.7;
  --letter-spacing-heading: -0.022em;
  --letter-spacing-eyebrow: 0.16em;
  --letter-spacing-nav: 0.01em;

  /* --- Spacing scale ----------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9rem;

  /* --- Layout ------------------------------------------------------------ */
  --container-width: 82.5rem;
  --container-narrow: 62rem;
  --reading-width: 44rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-spacing: clamp(4.5rem, 9vw, 9.5rem);
  --section-spacing-tight: clamp(3rem, 5vw, 5rem);
  --grid-gap: clamp(1.5rem, 3vw, 3.25rem);
  --rule-width: 1px;

  --header-height: 5.25rem;
  --header-height-compact: 4.25rem;

  /* --- Shape ------------------------------------------------------------- */
  --card-radius: 2px;
  --control-radius: 2px;
  --media-radius: 0px;
  --border-width: 1px;

  /* Restrained elevation. Depth comes from rules and space, not drop shadows. */
  --shadow-subtle: 0 1px 2px rgb(18 24 31 / 5%);
  --shadow-raised: 0 18px 48px -28px rgb(18 24 31 / 32%);

  /* --- Motion ------------------------------------------------------------ */
  --duration-fast: 160ms;
  --duration: 320ms;
  --duration-slow: 620ms;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layering ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-dialog: 500;
  --z-skip-link: 600;
}

/*
  Inverse context. Applied to any element that sits on a dark surface so that
  every component inherits the correct palette without bespoke overrides.

  The four components listed alongside it are dark by definition, so they opt in
  here rather than repeating the remapping. Without this, --colour-primary stays
  ink and a primary button painted on a dark surface is invisible.
*/
.is-inverse,
.hero:not(.hero--editorial):not(.hero--document),
.page-hero--inverse,
.cookie-banner,
.site-footer {
  --colour-background: var(--colour-surface-inverse);
  --colour-background-alt: #0b0f14;
  --colour-surface: #1a222b;
  --colour-text: var(--colour-text-inverse);
  --colour-text-muted: var(--colour-text-muted-inverse);
  --colour-border: var(--colour-border-inverse);
  /*
    Lighter than a simple inversion would give. This token draws control
    boundaries — the secondary button outline among them — which need 3:1
    against the surface to be perceivable. #3a4650 reached only 1.9:1.
  */
  --colour-border-strong: #61707c;
  --colour-primary: var(--colour-text-inverse);
  --colour-primary-hover: #800080;
  --colour-accent: #800080;
  --colour-accent-hover: #FF02BF;
  --colour-focus: #FF02BF;
  --colour-on-primary: var(--colour-surface-inverse);
  --colour-on-accent: var(--colour-surface-inverse);
}

.is-inverse {
  background-color: var(--colour-background);
  color: var(--colour-text);
}