/* Beacon UI v2 — design tokens
   Owned by: claude-tasks/006-ui-v2-redesign
   Only CSS variables and @font-face rules belong here. */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: 'Hellix';
  src: url('/static/fonts/hellix/Hellix-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Hellix';
  src: url('/static/fonts/hellix/Hellix-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Atrament';
  src: url('/static/fonts/atrament/Atrament-Bold-Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

:root {
  /* Brand */
  --yellow: #FFDE00;
  --yellow-dark: #F5C800;
  --yellow-muted: rgba(255, 222, 0, 0.12);
  --yellow-subtle: rgba(255, 222, 0, 0.06);
  --teal: #0BE5C1;
  --teal-dark: #09C5A5;
  --teal-muted: rgba(11, 229, 193, 0.12);

  /* Neutrals */
  --dark: #343434;
  --bg: #F9FAFB;
  --bg-card: #FFFFFF;
  --bg-elevated: #F3F4F6;
  --bg-hover: #E5E7EB;
  --text: #343434;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --border: #E5E7EB;
  --border-light: #F3F4F6;

  /* Status */
  --red: #EF4444;
  --red-muted: rgba(239, 68, 68, 0.10);
  --amber: #F59E0B;
  --amber-muted: rgba(245, 158, 11, 0.10);
  --emerald: #10B981;
  --emerald-muted: rgba(16, 185, 129, 0.10);
  --violet: #8B5CF6;
  --violet-muted: rgba(139, 92, 246, 0.10);

  /* Typography */
  --font-sans: Hellix, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: Atrament, sans-serif;
}