/* Knocturn Broadcast tokens. Colours come only from CLAUDE.md. Pulse copies this folder later. */

@font-face { font-family: 'Saira'; src: url('/fonts/saira.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('/fonts/saira-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('/fonts/saira-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('/fonts/saira-condensed-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --grey-black: #1A1A1A;
  --burgundy: #6D001A;
  --olive: #B5AC8A;
  --ivory: #F5F1EC;

  --black-900: #111010;
  --black-700: #262423;
  --black-600: #34312E;
  --burgundy-600: #5F0017;
  --burgundy-700: #520014;
  --burgundy-800: #45000F;
  --burgundy-900: #38000C;
  --ivory-200: #E7E1D6;
  --ivory-300: #DDD6C8;
  --olive-200: #CFC7B3;
  --olive-800: #5E584A;
  --rose: #EAD3D8;

  --font-body: 'Saira', system-ui, sans-serif;
  --font-display: 'Saira Condensed', 'Saira', system-ui, sans-serif;

  --text-sm: 0.8125rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.25rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --touch: 44px;
  --angle: 14px;
  --shadow-hard: 8px 8px 0 var(--burgundy);
  --shadow-ledge: 0 10px 0 -4px var(--black-900);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grey-black);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.1; }
p { margin: 0; }

/* Two rings, so focus shows on light and dark fills alike. */
:focus-visible {
  outline: 3px solid var(--ivory);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--black-900);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}