/* Vibe Coding Game Lab — design tokens (source of truth for docs/DESIGN.md §4) Owner: designer. Coder may copy this file verbatim into the app stylesheet. All fonts are local/system stacks: no web-font downloads, no CDN. Contrast ratios (WCAG 2.x) verified 2026-10-15 by calculation; see DESIGN.md §4.2. */ :root { color-scheme: light; /* ---- Raw palette: "garage asphalt + workshop paper + signal orange" ---- */ --asphalt-900: #15171c; /* darkest: hero, game stage, footer */ --asphalt-800: #1f2229; /* raised dark panels, HUD plates */ --asphalt-700: #2b2f38; /* dark borders/hover on dark */ --asphalt-600: #3a3f4a; /* dark dividers */ --paper: #f7f2e8; /* page background (warm workshop paper) */ --paper-2: #ede5d5; /* sunken panels, prompt blocks, sidebar */ --white: #ffffff; /* cards on paper */ --ink: #1a1c21; /* body text on paper 15.3:1 */ --ink-2: #454b57; /* secondary text 7.9:1 */ --ink-3: #5d6370; /* tertiary/meta text 5.4:1 (never below 14px) */ --chalk: #e9e4da; /* text on asphalt 14.2:1 */ --chalk-2: #b9b5ad; /* secondary on asphalt 8.8:1 */ --signal: #ff6a1a; /* brand accent (fills, car body, CTA on dark) */ --signal-text: #b03f00; /* orange used AS TEXT/links on paper 5.3:1 */ --signal-deep: #8f3300; /* primary button fill on paper (white text 7.9:1) */ --mint: #2fc4a5; /* success fill / checkpoint gates on dark */ --mint-text: #0b6e5c; /* success text on paper 5.5:1 */ --sky: #8fd0ea; /* scene sky, info fill */ --sky-text: #1d5f7a; /* info text on paper 6.3:1 */ --amber: #ffc53d; /* caution fill, kerb/lane paint, focus ring on dark */ --amber-text: #8a5a00; /* caution text on paper 5.3:1 */ --red-text: #a3192b; /* stop/danger text on paper 6.9:1 */ /* ---- Semantic roles ---- */ --bg: var(--paper); --bg-sunken: var(--paper-2); --surface: var(--white); --text: var(--ink); --text-muted: var(--ink-2); --text-meta: var(--ink-3); --link: var(--signal-text); --border: #cfc6b4; /* hairline on paper (decorative only, 1.6:1) */ --border-strong: #8a8170; /* input/checkbox borders on paper 3.4:1 (non-text 3:1 OK) */ --focus: #1d5f7a; /* focus ring on light surfaces (6.3:1 vs paper) */ --focus-on-dark: var(--amber); --btn-primary-bg: var(--signal-deep); --btn-primary-fg: var(--white); --btn-primary-hover: #7a2b00; /* Callout pairs: background / left rule / label text */ --note-teacher-bg: #e4eef2; --note-teacher-rule: var(--sky-text); --note-teacher-label: var(--sky-text); --note-safety-bg: #f7e3e3; --note-safety-rule: var(--red-text); --note-safety-label: var(--red-text); --note-expect-bg: #e2f1ec; --note-expect-rule: var(--mint-text); --note-expect-label: var(--mint-text); --note-trouble-bg: #f8ecd2; --note-trouble-rule: var(--amber-text);--note-trouble-label: var(--amber-text); --note-unverified-bg: var(--paper-2); --note-unverified-rule: var(--ink-2); /* ---- Typography (system stacks only) ---- */ --font-display: "Bahnschrift", "DIN Alternate", "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif; --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif; --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", monospace; /* Fluid type scale (min @ 360px, max @ 1280px) */ --step--1: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem); /* 14→15 meta, captions */ --step-0: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem); /* 17→18 body */ --step-1: clamp(1.1875rem, 1.13rem + 0.27vw, 1.375rem); /* 19→22 h4, lead */ --step-2: clamp(1.375rem, 1.26rem + 0.54vw, 1.75rem); /* 22→28 h3 */ --step-3: clamp(1.75rem, 1.53rem + 0.98vw, 2.375rem); /* 28→38 h2 / lesson title */ --step-4: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); /* 36→56 page h1 */ --step-5: clamp(2.625rem, 1.9rem + 3.2vw, 4.5rem); /* 42→72 hero h1 */ --leading-body: 1.62; --leading-tight: 1.08; --leading-heading: 1.18; --tracking-display: -0.01em; /* Bahnschrift is already narrow; do not over-tighten */ --tracking-eyebrow: 0.12em; --measure: 68ch; --weight-regular: 400; --weight-medium: 600; --weight-bold: 700; /* ---- Spacing (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --gutter: clamp(1rem, 4vw, 2.5rem); --container: 76rem; /* 1216px */ --reader: 46rem; /* lesson column */ --rail: 17.5rem; /* lesson nav rail */ /* ---- Shape / elevation ---- */ --radius-sm: 4px; /* chips, kbd, inputs */ --radius-md: 8px; /* buttons, prompt blocks, callouts */ --radius-lg: 14px; /* cards, game frame */ --shadow-1: 0 1px 0 rgba(26,28,33,.06), 0 1px 3px rgba(26,28,33,.08); --shadow-2: 0 2px 0 rgba(26,28,33,.05), 0 8px 24px rgba(26,28,33,.10); --shadow-stage: 0 24px 60px rgba(0,0,0,.35); --hairline: 1px solid var(--border); --focus-ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus); --focus-ring-dark: 0 0 0 3px var(--asphalt-900), 0 0 0 6px var(--focus-on-dark); /* ---- Motion (all disabled under reduced motion) ---- */ --ease-out: cubic-bezier(.2,.8,.2,1); --dur-fast: 120ms; --dur-base: 200ms; /* ---- Touch targets ---- */ --tap-min: 44px; --tap-game: 72px; /* on-screen driving buttons */ /* ---- Signature motif: chequer + lane stripe ---- */ --chequer: repeating-conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%) 0 0 / 12px 12px; --lane-stripe: repeating-linear-gradient(90deg, var(--amber) 0 24px, transparent 24px 40px); } /* Breakpoints (use in media queries; custom properties cannot be used inside @media): sm < 640px mobile, single column md 640–1023 tablet, single column, lesson nav as drawer lg ≥ 1024 desktop, 3-column lesson reader (rail / reader / aside) xl ≥ 1280 widened gutters only */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media (forced-colors: active) { :root { --focus: Highlight; --focus-on-dark: Highlight; } }