/* Design System tokens: values copied exactly from DESIGN_SYSTEM.md (Module 02).
   Prefixed --ds- so they sit alongside the superseded --bc-* tokens without collision.
   Do not add or change values here without an operator-approved Design System change. */

/* Self-hosted fonts (Latin subset, OFL). Display: Barlow Condensed. Body: Barlow. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/barlow-condensed-800.woff2") format("woff2"); }

:root {
  /* A3 colour: surfaces and neutrals */
  --ds-slate-900: #12181F;
  --ds-slate-800: #1B242E;
  --ds-slate-700: #2A3642;
  --ds-slate-500: #6B7885;
  --ds-line: #D5DCE3;
  --ds-mist: #E6EBF0;
  --ds-paper: #F4F6F8;
  --ds-white: #FFFFFF;

  /* A3 colour: accent */
  --ds-amber: #FFB81C;
  --ds-amber-hover: #FFC94D;
  --ds-amber-pressed: #E8A000;
  --ds-amber-text: #8A5200;
  --ds-amber-tint: #FFF4D6;

  /* A3 colour: text, links, focus */
  --ds-ink: #12181F;
  --ds-ink-soft: #4A5662;
  --ds-on-dark: #F4F6F8;
  --ds-on-dark-soft: #B8C4CF;
  --ds-link: #0A5A9C;
  --ds-link-hover: #07406F;
  --ds-link-on-dark: #FFC94D;
  --ds-focus-light: #0A5A9C;
  --ds-focus-dark: #FFB81C;

  /* A4 typography */
  --ds-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ds-font-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* A5 spacing (4px base) */
  --ds-s1: 4px;
  --ds-s2: 8px;
  --ds-s3: 12px;
  --ds-s4: 16px;
  --ds-s5: 24px;
  --ds-s6: 32px;
  --ds-s7: 48px;
  --ds-s8: 64px;
  --ds-s9: 96px;

  /* A5 container and gutters (mobile default) */
  --ds-container: 1200px;
  --ds-gutter: var(--ds-s4);
  --ds-section-y: var(--ds-s7);

  /* A7 radius */
  --ds-radius-control: 6px;
  --ds-radius-card: 8px;
  --ds-radius-panel: 12px;
  --ds-radius-pill: 999px;

  /* A6 shadows */
  --ds-shadow-sm: 0 1px 2px rgba(18, 24, 31, .08);
  --ds-shadow-md: 0 4px 12px rgba(18, 24, 31, .12);
  --ds-shadow-lg: 0 12px 32px rgba(18, 24, 31, .18);
}

@media (min-width: 768px) {
  :root { --ds-gutter: var(--ds-s5); --ds-section-y: var(--ds-s8); }
}
@media (min-width: 1024px) {
  :root { --ds-gutter: var(--ds-s6); --ds-section-y: var(--ds-s9); }
}