/* OneUp Tech — generated from tokens.json */
:root, [data-theme="light"] {
  --green-500: #9cd908; /* Electric Green — the 1UP colour: energy and progress. Fills for primary buttons, XP bars, highlight blocks. Never text on paper (1.4:1); on `charcoal-900`/`charcoal-800` it reads 11:1 / 9.8:1. */
  --green-300: #c4ef5a; /* Green tint for large relief blocks and pixel-dissolve accents. Decorative only. */
  --green-700: #4a6b00; /* Text-safe green on paper (5.0:1 on `paper-100`). Links and green words in light theme. */
  --coral-500: #f35142; /* Coral Heart — the human side: the pixel heart, love, togetherness. Fills and emphasis words on dark (5.4:1 on `charcoal-900`). Not an error colour. */
  --coral-200: #ffc9c2; /* Coral tint for large relief blocks. Decorative only. */
  --coral-700: #b42a1c; /* Text-safe coral on paper (5.2:1 on `paper-100`): emphasis words like “together.” in light theme. */
  --charcoal-900: #111312; /* Deep Charcoal — focus and depth. Panels, pixel outlines, hard shadows, text on paper. */
  --charcoal-800: #1c1f1d; /* Raised charcoal: cards inside a dark panel, dark-theme surfaces. */
  --charcoal-700: #23272a; /* Dark-theme panel, one step above `charcoal-800`. */
  --steel-500: #6f7470; /* Heart Tank shell grey: hairlines and disabled marks (3.9:1 on paper). */
  --paper-100: #efe7d3; /* Warm Off-White — clarity and welcome. The paper ground of every light layout. */
  --paper-50: #f8f3e8; /* Lighter paper for inputs and raised cards on `paper-100`. */
  --paper-200: #e2d8c0; /* Darker paper for torn-paper scraps and quiet bands on `paper-100`. */
  --bg: var(--paper-100); /* Page ground. */
  --surface: var(--paper-50); /* Raised cards, inputs, sheets on `bg`. */
  --panel: var(--charcoal-900); /* The dark HUD panel used for callouts in BOTH themes; carries `on-panel` text. */
  --ink: var(--charcoal-900); /* Body and heading text on `bg` and `surface` (15:1 light, 13.5:1 dark). */
  --ink-muted: #55594f; /* Secondary text on `bg` and `surface` (≥5.8:1 light, ≥7.2:1 dark). */
  --on-panel: var(--paper-100); /* Text on `panel` (15:1 / 12:1). */
  --on-panel-accent: var(--green-500); /* Green highlight words on `panel` (11:1 / 8.9:1). */
  --accent: var(--green-500); /* Primary action fill; always with `on-accent` text and a `outline` pixel border on paper. */
  --on-accent: var(--charcoal-900); /* Text and icons on `accent` (11:1). */
  --accent-text: var(--green-700); /* Green words and links on `bg`/`surface` (5.0:1 light, 9.8:1 dark). */
  --heart: var(--coral-500); /* Heart fill: hearts, the heart button, love moments. Pair with `on-heart` text. */
  --on-heart: var(--charcoal-900); /* Text on `heart` (5.4:1). Never white on coral (3.5:1). */
  --heart-text: var(--coral-700); /* Coral emphasis words on `bg`/`surface` (5.2:1 light, 4.8:1 dark). */
  --outline: var(--charcoal-900); /* The 2–3px pixel outline around fills and stickers, and hard shadows. */
  --hairline: #cbbf9f; /* Decorative rules and dividers. Not for control borders. */
  --control-border: #8a8270; /* Input and control borders (3.1:1 on paper, 3.6:1 on charcoal). */
  --focus: var(--charcoal-900); /* Focus ring: 3px solid, 2px offset (15:1 on paper, 11:1 on charcoal). */
  --success: var(--green-700); /* Success text/icons on `bg`. Always with a word or icon. */
  --danger: #b3261e; /* Errors only — distinct from brand coral (5.3:1 light, 8.1:1 dark). Always with a word or icon. */
  --shadow-pixel: 4px 4px 0 0 #111312; /* Hard offset shadow under buttons, stickers and raised cards. Never blurred. */
  --shadow-pixel-sm: 2px 2px 0 0 #111312; /* Pressed buttons, small tags. */
}
[data-theme="dark"] {
  --bg: var(--charcoal-900);
  --surface: var(--charcoal-800);
  --panel: var(--charcoal-700);
  --ink: var(--paper-100);
  --ink-muted: #b3ab98;
  --on-panel: var(--paper-100);
  --on-panel-accent: var(--green-500);
  --accent: var(--green-500);
  --on-accent: var(--charcoal-900);
  --accent-text: var(--green-500);
  --heart: var(--coral-500);
  --on-heart: var(--charcoal-900);
  --heart-text: var(--coral-500);
  --outline: #050605;
  --hairline: #33372f;
  --control-border: #6b6f68;
  --focus: var(--green-500);
  --success: var(--green-500);
  --danger: #ff8a7a;
  --shadow-pixel: 4px 4px 0 0 #050605;
  --shadow-pixel-sm: 2px 2px 0 0 #050605;
}
:root {
  --space-1: 4px; /* The pixel unit. Icon gaps, outline offsets. */
  --space-2: 8px; /* Tag padding, tight stacks. */
  --space-3: 12px; /* Button vertical padding, list gaps. */
  --space-4: 16px; /* Card padding (compact), form gaps. */
  --space-6: 24px; /* Card and panel padding. */
  --space-8: 32px; /* Gaps between cards in a grid. */
  --space-12: 48px; /* Section inner padding. */
  --space-16: 64px; /* Between sections. */
  --space-24: 96px; /* Hero padding. */
  --radius-0: 0px; /* Default: panels, cards, tiles, XP bars — pixels are square. */
  --radius-sm: 2px; /* Buttons, inputs, tags — a hint of softness, still blocky. */
  --radius-md: 8px; /* Phone/app surfaces and the speech-bubble achievement. */
  --radius-pill: 999px; /* Circular badges and avatars only. */
  --stroke-1: 1px; /* Hairlines. */
  --stroke-2: 2px; /* Pixel outline on buttons, inputs, tags. */
  --stroke-3: 3px; /* Stickers, XP bar frames, focus ring. */
  --font-pixel: "Jersey 20", "Space Mono", monospace;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --font-hand: "Caveat", "Comic Sans MS", cursive;
  --text-pixel-xl: 400 112px/100px var(--font-pixel); /* Hero lockups only — one per page. Uppercase. */
  --text-pixel-l: 400 72px/68px var(--font-pixel); /* Section openers, posters. Uppercase. */
  --text-pixel-m: 400 40px/40px var(--font-pixel); /* Scores, levels, sticker numerals. */
  --text-h1: 700 56px/56px var(--font-display); /* Page title. Often uppercase in campaign layouts. */
  --text-h2: 700 36px/40px var(--font-display); /* Section headings. */
  --text-h3: 700 24px/30px var(--font-display); /* Card and panel headings. */
  --text-h4: 700 18px/24px var(--font-display); /* Feature tile titles, small headings. */
  --text-body-l: 400 20px/30px var(--font-body); /* Lead paragraphs. */
  --text-body: 400 16px/24px var(--font-body); /* Default copy. */
  --text-body-strong: 700 16px/24px var(--font-body); /* Inline emphasis, button text. */
  --text-body-s: 400 14px/20px var(--font-body); /* Captions, helper text. */
  --text-label: 700 13px/16px var(--font-mono); /* Uppercase HUD labels: tags, eyebrows, stats, button text in small sizes. */
  --text-hud: 700 11px/14px var(--font-mono); /* Tiny uppercase captions under swatches and icons. */
  --text-code: 400 14px/20px var(--font-mono); /* Terminal prompts and code. */
  --text-hand: 600 32px/34px var(--font-hand); /* Handwritten asides — at most one per view, never for information. */
}
.pixel-xl {
  font-family: var(--font-pixel);
  font-size: 112px;
  line-height: 100px;
  font-weight: 400;
  letter-spacing: 0;
}
.pixel-l {
  font-family: var(--font-pixel);
  font-size: 72px;
  line-height: 68px;
  font-weight: 400;
  letter-spacing: 0;
}
.pixel-m {
  font-family: var(--font-pixel);
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0;
}
.h4 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
}
.body-l {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
}
.body-s {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hud {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.hand {
  font-family: var(--font-hand);
  font-size: 32px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: 0;
}