/* Career Badger — design tokens (shared across all prototype phases) */

:root {
  /* Palette */
  --bg: #0D0D0F;
  --magenta: #E91E8C;
  --text: #F5F5F5;
  --muted: #888888;

  /* Subtle UI surfaces derived from palette — not net-new colours */
  --border-subtle: rgba(245, 245, 245, 0.12);
  --border-default: rgba(245, 245, 245, 0.24);
  --surface-raised: rgba(245, 245, 245, 0.04);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Three typography candidates — page sets one as --font-display */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-inter-display: "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-space-grotesk: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Body always system sans — this never changes across candidates */
  --font-body: var(--font-system);

  /* Permanent Marker for the "Badger" wordmark only — third voice, not under review */
  --font-wordmark: "Permanent Marker", cursive;

  /* Hero scale — clamp for responsive */
  --hero-size: clamp(48px, 8vw, 96px);
}

/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

button { font-family: inherit; }

::selection { background: var(--magenta); color: var(--text); }