/* Knocturn Broadcast tokens. Colours come only from CLAUDE.md. Copied from Relay, teal palette. */

@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 {
  --bg: #0B0C10;
  --secondary: #45A29E;
  --primary: #66FCF1;
  --text: #C5C6C7;

  --bg-900: #07080B;
  --panel: #1F2833;
  --panel-600: #2A3644;
  --secondary-600: #3A8A86;
  --secondary-700: #2F716E;
  --secondary-800: #245956;
  --secondary-900: #1A403E;
  --text-200: #B4B6B8;
  --text-300: #A9ABAD;
  --text-muted: #9EA3A8;
  --note: #1C2530;
  --error: #FFB3B8;

  --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(--secondary);
  --shadow-ledge: 0 10px 0 -4px var(--bg-900);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  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(--text);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--bg-900);
}

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