/*
 * Design tokens, lifted verbatim from the design system
 * (design-reference/design-system.html#tokens) and CLAUDE.md.
 * This is the single source of truth for colour, type, spacing and motion —
 * do not duplicate these values inline in templates or other stylesheets.
 */

:root {
  /* Palette */
  --freyr-bone: #F3F1EC;
  --freyr-hay: #DEC37A;
  --freyr-ink: #161616;
  --freyr-pebble: #A69F95;

  /* Neutrals derived from Bone & Pebble */
  --freyr-surface: #F8F7F4;
  --freyr-surface-sunken: #EAE7E0;
  --freyr-border: #DAD5CC;
  --freyr-border-strong: #A69F95;
  --freyr-text: #161616;
  --freyr-text-muted: #5F594F;
  --freyr-text-on-ink: #F3F1EC;

  --freyr-bone-warm: #EDE7DA; /* fixed header, solid state */
  --freyr-border-warm: #D6CFC0;

  /* Status */
  --freyr-success: #4E6B4F;
  --freyr-warning: #8A6A2F; /* also: eyebrow text on Bone */
  --freyr-error: #9B4636;
  --freyr-info: #4E6275;

  /* Component-local tones seen in design-system.html but not in the
     original token block — named here so they aren't hard-coded inline. */
  --freyr-ink-pressed: #3A3A38; /* button pressed state, dark dividers */
  --freyr-pebble-light: #CFC9BF; /* chart "everything else" slice */
  --freyr-gridline: #E4E0D8; /* chart gridlines */
  --freyr-hatch-tint: #F6EEDA; /* second tone in the modelled-value hatch */
  --freyr-insight-fill: #FBF7EC; /* chart "insight" annotation box */
  --freyr-footnote-text: #3A352E;
  /* Multi-Asset risk scale, between Hay (lowest) and Ink (highest) —
     sampled from the client's risk-levels visual, 2026-10-16. */
  --freyr-risk-2: #AC9964;
  --freyr-risk-3: #7A6E4B;
  --freyr-risk-4: #494330;

  /* Type */
  --freyr-font-sans: 'Instrument Sans', system-ui, sans-serif;
  --freyr-font-script: 'Reenie Beanie', cursive;

  /* Spacing — 4px base */
  --freyr-space-1: 4px;
  --freyr-space-2: 8px;
  --freyr-space-3: 12px;
  --freyr-space-4: 16px;
  --freyr-space-6: 24px;
  --freyr-space-8: 32px;
  --freyr-space-12: 48px;
  --freyr-space-16: 64px;
  --freyr-space-24: 96px;
  --freyr-space-32: 128px;

  /* Radii & strokes */
  --freyr-radius-sm: 2px;
  --freyr-radius-md: 4px;
  --freyr-radius-lg: 8px;
  --freyr-stroke: 1px;

  /* Layout */
  --freyr-container: 1280px;
  --freyr-gutter: 24px;
  /* Site-wide left/right page padding — the header's own value, made the
     standard for every page section and the footer (Ian, 2026-09-24).
     The two illustration tools keep their own. */
  --freyr-page-gutter: clamp(20px, 2.6vw, 44px);
  --freyr-columns: 12;

  /* Motion */
  --freyr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --freyr-duration-fast: 120ms;
  --freyr-duration-base: 240ms;
  --freyr-duration-slow: 480ms;
}