/* B277 / tokens.css — design tokens + body[data-mode] overrides. Split from style.css 2026-05-24 (~640 LOC). Siblings load order: base.css → components.css → modals.css → screens.css → game.css → decorative.css → legacy-pantsy-7-8.css */ /* Pants on Fire — styling Mobile-first, Kahoot-aktig følelse: store knapper, klar typografi, leken fargekombinasjon (denim-blå bunn + flamme-orange aksenter). */ /* ============================================================ FILE MAP — sections + approximate line ranges (B277 cut-list) ============================================================ Use this to navigate. Update when sections shift significantly. Sub-file column = B277's split target (`app/public/css/*.css`). Load order in index.html (per B277 Decision #6): tokens.css → base.css → components.css → modals.css → screens.css → game.css → decorative.css → legacy-pantsy-7-8.css Line numbers are pre-extension approximations — they drift slightly when this comment block grows. The ═══ box-rule dividers (and the section-header comments listed below) are the LOAD-BEARING cut-lines for B277's per-batch slice. ┌─ MAPPED HALF (L6–7820, original FILE MAP scope) ─────────┐ 6 → 270 Tokens (color, font, radius, shadow, z-index) + body / app shell [tokens + base] 270 → 500 .screen / .intro slideIn / hero / mascots / wordmark [base] 500 → 1100 Buttons (.btn / .btn-primary / .btn-cream / .btn-ghost) + cards [components] 1100 → 1400 PANTSED-momentet (vote-timer-bar, vote-waiting, achievements toast) [game] 1400 → 1500 End-of-game podium / winner hero [game] 1500 → 1750 Modal / overlay / toast (.onboard-overlay, .brand-confirm, .toast) [modals] 1750 → 2100 Lobby specifics (code-display-card, share-row, QR, players-row) [screens] 2100 → 2500 Categories picker / build-category sheet [screens] 2500 → 3000 Settings sheet, Profile sheet, Stats modal [screens] 3000 → 3400 Clubs sheet / Club detail (identity-hero, leaderboard, moments) [screens] 3400 → 3900 Loading screen, intro animation, audit-error helpers [screens] 3900 → 4170 Settings modal-v2 (full-screen sheet) [screens] 4170 → 4360 Profile field rows, identity card, achievements grid [screens] 4360 → 4720 Profile / clubs misc [screens] 4720 → 5110 Lobby compact, club banner, lobby actions [screens] 5110 → 5250 Vote-screen specifics (.vote-screen, .vote-list, .vote-row) [game] 5250 → 5350 Result-screen layout (.result-screen, .result-card, particles) [game] 5350 → 5550 End-of-game (winner-hero, awards, top-3 in club, club totals) [game] 5550 → 5635 Reveal-screen (.reveal-screen, role cards) [game] 5635 → 5850 Discuss / clue turn (.clue-screen, .clue-floor-card, peek) [game] 5850 → 5930 Mic glyph, clue-round indicator [game] 5930 → 6170 Best-clue voting + result row breakdown [game] 6170 → 6270 Vote-button polish, smarty-gold treatment [game] 6270 → 6960 PANTSY decorative (flame-strut, jeans-strut, ember, dust, stamps) [decorative] 6960 → 7270 Achievement overlay v2 (medal SVG, sparkles, slide-in) [modals] 7270 → 7640 Pantsy-7 redesign — final screen, awards card, top3 [legacy-pantsy-7-8] ┌─ EXTENDED HALF (L7642–EOF, extended Phase 0 of B277 2026-05-23) ─┐ 7642 → 7895 ═══ GAME SHOW Sheet — full-screen overlay for Settings / Categories [modals] 7820 → 7895 · build-category AI block, suggested-words card, smart auto-pick [screens] (overlapping range — sheet chassis above, AI builder below) 7895 → 7979 ═══ GAME SHOW screens 03/04/05/06 — outer-eyebrow + card + CTA [screens] (reveal, handover wrapper, pantsy-name flicker, reveal-card) 7979 → 8237 ═══ Clue turn (07) — floor card + mic + turn-order strip [game] (peek-blocked btn, hold-progress) 8237 → 8358 ═══ Vote screens (07b / 07c) — central question + icon [game] (round eyebrow, stagger pop-in, push waiting-row bottom) 8358 → 8994 ═══ Result screens (08 Pantsed / 09 Escaped) — theatrical card [game] (B214 v3 scroll, tied best-clue, escaped headline, caught flame, escaped jeans + dust, best-clue gold pill, round-summary table, PANTSY tag, best-clue tag, round delta, AI builder hint, cumulative total, bottom CTA-row, end-game subtle, skip CTA) 8994 → 9131 ═══ #20 Name-only modal — obligatory entry surface [modals] 9131 → 9388 ═══ Bølge 206 — v3 ScreenOnboarding reskin of nameOnlyModal [screens] (wordmark+flag picker, body, name+shuffle, larger-text, recovery, bottom CTA, cream surface) 9388 → 9627 ═══ Rules-modal (02a) — first-time onboarding + how-it-works [modals] (overlay inheritance fix, paper-grain, pack eyebrow, name-prompt section, body title sizing) 9627 →10116 ═══ 02b Categories picker — REDESIGN match Claude Design [screens] (selection-summary, summary banner, 44×44 hit target, seasonal-upcoming, cat-card, selected/icon-tile, check badge, NEW badge, 18+ badge) 10116 →11905 ═══ Build category sheet — full-screen tabbed sheet (AI ↔ Manuell) [screens] (sheet-modal, tap-to-edit, examples block, card variant, inline edit, input-wrap, red cursor nudge, generate pill, empty-input disabled, lobby club-recognised banner, empty hint, words list refactor + cream panel, awards card, club memorable-moments, locked award, top-3 club, simplified club totals, award tags, best-clue prefix, chip preview, entry-row variant) 11905 →12222 ═══ B208a — Categories v3 reskin (2026-05-15) [screens] (vibe-injected dashed gold, autopick affordance, stagger, narrow-viewport guard, selected ✓ pip, status pill, auto-pick card, section eyebrow) 12222 →12465 ═══ B208b — Build-a-category + Delete-confirm + picker P1s [screens] 12465 →13098 ═══ B208b-2 — Build-a-category + Delete-confirm verifier-clear fixes [screens] (build-sheet ghost, suggested italic, framed word list, delete hero italic, delete crimson CTA, confirmcard center, perf-separator, gold ambient wash) 13098 →13205 ═══ Bølge 2.0 — Floor Screen + Smart-Roast ticker + Peke-kaos [game] 13205 →13614 ═══ Bølge 28 — profile + lobby polish CSS additions [screens] 13614 →13776 ═══ Bølge 213 SYSTEM 2 — Peke-kaos v3 accusation theatre [game] 13776 →14122 ═══ Bølge 213 SYSTEM 3+4 — shared cue-card chassis [game] 14122 →15272 ═══ Bølge 2.1 — Final Stand 2-stage phase [game] 15272 →15904 ═══ Bølge 30 — profile surface lock-down [screens] 15904 →16625 ═══ Bølge 213 SYSTEM 1 — Final Stand verdict slam (v3) [game] 16625 →16720 ═══ B97.1 + B97.2 — Vote-Pantsy + Vote-Smarty parity chassis [game] 16720 →17054 ═══ Bølge 112 — Joiner conversion panel [screens] 17054 →17288 ═══ B209 — Pass + Reveal flow reskin [game] 17288 →17326 ═══ B211 — Voter-confirmation pill [game] 17326 →17770 ═══ B212 — Vote screens skin [game] 17770 →18816 ═══ B210a — Stress Mode visual chassis (body[data-mode] overrides) [game] 18816 →20126 ═══ B256 v2 — Final scoreboard viewport constraint, chrome-aware [game] CONVENTIONS * All colors via CSS custom properties (--primary, --pantsy, --gold, etc). * Z-index layers via tokens (--z-overlay, --z-toast, --z-confirm) — see :root. * Animations gated on prefers-reduced-motion at :root level (line ~1527). * Class naming: kebab-case for components, ABBR-x suffixes for variants (e.g. .ach-grid-icon, .pcr-name, .cs-tile). B277 SPLIT (post-extension target — 8 sub-files under app/public/css/) * tokens.css — :root token block + body[data-mode] token overrides * base.css — html/body resets, .screen/.intro/.app/.topbar, hero, mascots, wordmark, GAME SHOW utility classes * components.css — buttons, cards, pantsy-9 primitives * modals.css — modal/overlay/toast primitives, achievement overlay v2, name-only modal, rules-modal, sheet overlay chassis * screens.css — lobby, picker, build-cat sheet, settings/profile/stats sheets, club detail/overview, loading, profile rows, joiner panel, profile surface lock-down, v3 ScreenOnboarding * game.css — pantsed/escaped, vote/reveal/clue/discuss/result, end-of-game/winner-hero, peke-kaos, final stand, stress-mode chassis, B256 final-scoreboard chrome * decorative.css — PANTSY decorative effects (flame/jeans/ember/dust/stamps) * legacy-pantsy-7-8.css — Pantsy-7 final-screen redesign + reduced-motion fallbacks (kept for B279 to delete later) ============================================================ */ :root { /* GAME SHOW palett — teatralt party-spill, høy kontrast, store displays. Fra Claude Designs redesign-pakke. Mettet aubergine bg, hot orange CTA, cream cards, dramatic pantsy-rød. Token-system: SURFACES (mood) — aubergine bg + cream/cream-glow cards ACTION — primary orange signatur for ALL CTA IDENTITY — pantsy-rød (rolle), smarty-gold (best clue), accent-cool (info) STATUS — danger/success/warning kept separate */ /* SURFACES — mer dramatisk dybde enn før (svartere bg, varmere cream) */ --surface-deep: #0F0418; /* Nesten-svart aubergine — gir mer kontrast */ --surface-mid: #1F0E2C; /* Elevation 1 — for dark cards */ --surface-hi: #2B143D; /* Elevation 2 — modal-overflater */ --surface-lo: #160820; /* Recessed — input bg, secondary */ --surface-card: #FFF4DE; /* Cream — varmere enn før */ --surface-card-bright: #FFF8E8; --surface-card-quiet: rgba(255, 244, 222, 0.55); /* Bakoverkompatibilitet */ --bg: var(--surface-deep); --bg-2: var(--surface-mid); --card: var(--surface-card); /* TEKST */ --text-on-deep: #FFF4DE; /* Cream på aubergine */ --text-on-card: #1A0820; /* Deep aubergine på cream — høyere kontrast */ --text-muted: rgba(255, 244, 222, 0.7); --text-faint: rgba(255, 244, 222, 0.4); --ink-soft: #3F1A4A; /* Soft tekst på cream */ --ink: #1A0820; /* Hardest tekst på cream — for input + body */ /* Items 2/4 (Bølge 1.9 / 2026-05-08): --text-soft is a TAN/KHAKI neutral so it reads correctly on BOTH dark aubergine and cream surfaces. Bølge 1.8 mistakenly aliased it to --ink-soft (deep purple), which made every dark-surface usage (gs-toggle-sub, build-words-list .bw-input, settings hints) effectively invisible. The cream-surface call-sites that needed deep-purple soft (rules-modal-body, name-modal-a11y-header) reference --ink-soft directly, so this change doesn't regress them. */ --text-soft: #B5A48E; --card-fg: var(--text-on-card); --muted: var(--text-muted); --border: #F0E2C2; /* PRIMARY ACTION — Game Show fire-orange, mer mettet enn før */ --primary: #FF5722; /* Game Show orange — knall */ --primary-hover: #D33E14; --primary-on: #ffffff; --primary-fg: var(--primary-on); --primary-2: var(--primary-hover); --primary-glow: rgba(255, 87, 34, 0.45); /* Bakover: --fire alias */ --fire: var(--primary); --fire-dim: var(--primary-hover); --ember: #FFC857; /* Warm gold-orange aksent */ /* SECONDARY */ --secondary: #FFC857; --secondary-2: #E8A93A; /* COOL ACCENT */ --accent-cool: #14b8a6; --accent-cool-deep: #0f766e; --accent-cool-bg: rgba(20, 184, 166, .12); /* IDENTITET — Game Show pantsy-rød (sterkere enn rose) + gold */ --pantsy: #FF1744; /* Hot crimson — Pantsy-drama */ --pantsy-2: #D81144; --pantsy-deep: #A8082E; --pantsy-glow: rgba(255, 23, 68, 0.30); --pantsy-hi: #FF3D6B; /* Lighter for highlights */ --gold: #FFD24A; /* Smarty / celebration gold */ --gold-deep: #C99820; --gold-glow: rgba(255, 210, 74, 0.30); --smarty-gold: var(--gold); /* B221/W3 (2026-05-17): --violet — the B219 OUTVOTED stamp colour. B219 W3 had to substitute var(--pantsy-deep) because --violet was undefined; B221/W3 defined it but with a Cowork-invented hex (#6B3FA0). Reveal-skip bundle W2 (2026-05-17) corrects it to the canonical pack value #9B6BFF (tokens.jsx:27 `violet`) — brand-warm, visually distinct from the --pantsy-red family. -deep/-soft are reserve variants (same convention as --gold-deep / --pantsy-2 — defined ahead of use). */ --violet: #9B6BFF; --violet-deep: #4A2870; --violet-soft: #9966CC; /* Bølge 215 (2026-05-17): cream-artifact chassis tokens for the v3 Final swipeable scoreboard (FinalCard). `--cream` was already consumed as `var(--cream, #FFF4DE)` in 3 result-screen sites with only the hex fallback resolving — defining it here resolves those too (no behavior change; value == fallback). `--cream-dim` is new (pack tokens.jsx `creamDim` #F0E2C2 — the paper-artifact bottom gradient stop). */ --cream: #FFF4DE; --cream-dim: #F0E2C2; /* V3 FOUNDATION — Bølge 205 (2026-05-15). Three calibrated tokens added in the _pantsy10 handover pass (token-diff.md §"Added — three new tokens"). --pof-* is the canonical name (matches the design pack's tokens.jsx keys: smartyGoldStroke / pantsyRedStroke / positive); the --pantsy-* aliases below let v3 reskin waves B206-B217 consume them in the existing alias-block convention. *-stroke — dark, AA-on-cream stroke for cream-surface SVG glyphs (best-clue strip, gold-button detail, medal eyebrow, red confirm-popup glyphs). positive — the ONLY positive-feedback green (correct-vote deltas in Round Summary). Don't introduce another. card-stroke-opacity — baseline cream-card border alpha; the stress shift (body[data-mode="stress"]) doubles it. */ --pof-smarty-gold-stroke: #8A5A1A; --pof-pantsy-red-stroke: #7A0A1F; --pof-positive: #7CD992; --pof-card-stroke-opacity: 0.15; /* PLAYER PALETTE — stable per-name color assignment across screens. Bølge 64 (2026-05-10): added per Pantsy9 design pack tokens.jsx gameshow direction. Consumed by avatar bg in B65+ VoteRow tone-aware rendering. Currently unconsumed at root level (B64 ships P1+P2 only — timer redesign — and stages these tokens for B65/B66/B67). */ --player-smarty-gold: var(--gold); /* B309.5 — semantic alias for PLAYER_PALETTE index 0 (role: smarty/host) */ --player-violet: #9B6BFF; --player-aqua: #5DCFEA; --player-pink: #E27ABE; --player-sky: #7FB0F0; /* Bølge 273 (2026-05-19): added for avatar gradient picker (pack v2-7 13aa). `plum` + `coral` are the two pack tokens not previously expressed in live's player palette; verbatim hex from _pantsy10 tokens.jsx. */ --player-plum: #C77DFF; --player-coral: #FF8A65; /* PANTSY9 ALIASES — Bølge 70.5 (2026-05-10): namespaced token aliases mapping the design pack's tokens.jsx gameshow direction onto the existing :root vars. Lets primitives + future reskin waves consume `var(--pantsy-fire)` etc. and stay portable across direction switches. The trailing `bg-grad` is duplicated from the html background-image declaration — keep the two in sync if either is touched. */ --pantsy-fire: var(--fire); --pantsy-pantsy-red: var(--pantsy); --pantsy-pantsy-red-hi: var(--pantsy-hi); --pantsy-smarty-gold: var(--gold); --pantsy-cream: var(--surface-card); --pantsy-cream-dim: var(--cream-dim); /* Bølge 215 — FinalCard chassis */ --pantsy-ink: var(--ink); --pantsy-ink-soft: var(--ink-soft); --pantsy-fg: var(--text-on-deep); --pantsy-fg-soft: var(--text-muted); --pantsy-fg-faint: var(--text-faint); --pantsy-bg: var(--surface-deep); --pantsy-bg-grad: radial-gradient(ellipse at 50% 0%, #3A0E2A 0%, #1A0820 50%, #0F0418 100%); --pantsy-surface: var(--surface-mid); --pantsy-surface-hi: var(--surface-hi); --pantsy-surface-lo: var(--surface-lo); --pantsy-display: var(--font-display); --pantsy-sans: var(--font-body); --pantsy-mono: var(--font-mono); --pantsy-radius-card: var(--radius-card); --pantsy-radius-btn: var(--radius-btn); --pantsy-radius-pill: var(--radius-pill); /* Bølge 205: v3 token aliases (canonical = --pof-* in the IDENTITY block). */ --pantsy-smarty-gold-stroke: var(--pof-smarty-gold-stroke); --pantsy-pantsy-red-stroke: var(--pof-pantsy-red-stroke); --pantsy-positive: var(--pof-positive); /* STATUS */ --danger: #FF1744; --success: #16a34a; --warning: #FFC857; /* === WARNING TONE — B304.5 (consumed by B306) ====================== */ --warning-amber: #f59e0b; /* warning-tint, distinct from --warning #FFC857 (24 sites) */ /* SHAPE — større radius enn før (Game Show: 28 cards, 18 buttons) */ --radius: 18px; --radius-card: 28px; --radius-btn: 18px; --radius-pill: 999px; /* === RADIUS — extension B304.5 (consumed by B318/B319) ============== */ --radius-xs: 8px; /* chip / badge tier (11 sites) */ --radius-sm: 10px; /* small card / pill-button (27 sites) */ --radius-md: 12px; /* medium tier (42 sites) */ --radius-md-2: 16px; /* stress-mode aligned tier (5 sites + stress-override symmetry) */ --radius-md-3: 14px; /* medium-large tier (26 sites) */ --radius-circle: 50%; /* circle clip (13 sites) — semantic alias for percent radius */ /* Bølge 168 (2026-05-13): modal-chassis consolidation tokens. Centered modal cards (.onboard-modal pattern) standardize on 24px radius and the deep-purple 0.94-alpha backdrop. Two outlier modals (.host-recovery-modal-overlay rgba(0,0,0,0.7) + .achievements-detail-overlay rgba(0,0,0,0.78)) migrate to these tokens in the same wave. .rules-modal-card stays at 20px per design decision D-032 (Pantsy-8 Batch 26) — intentional tighter rounding, not drift. */ --radius-modal: 24px; --modal-backdrop: rgba(15, 4, 24, 0.94); /* === SCRIM — overlay backdrops, NY 2026-05-20 (B319) ====== */ --scrim-sheet: var(--surface-deep); /* opak — full-screen destinasjoner */ --scrim-modal: var(--modal-backdrop); /* rgba 0.94 — sentrerte momentan-dialoger */ --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .50); --shadow-glow: 0 8px 24px var(--primary-glow); /* Z-INDEX STACK — single source of truth for layering. Add 2026-05-04 (code review CR.1 R2): scattered magic numbers across the file made stacking conflicts theoretically possible. Tokens fix that. Stacking from back to front: 1 .reveal-card content over reveal-card backdrop (intra-card layering) 100 lobby code-card sticky badges --z-overlay modal/sheet/onboard backdrop (was 200) --z-sheet full-screen sheets above plain overlays (was 240) --z-toast toast notifications, auto-pick-mix overlay (was 250) --z-build-cat build-category sheet (was 260) --z-achievement achievement-overlay slide-in card (was 270) --z-confetti canvas confetti at game-end (was 300) --z-confirm brand-confirm modal — TOP, even above achievements (so danger-confirm dismisses are always reachable) */ --z-overlay: 200; --z-sheet: 240; --z-toast: 250; --z-build-cat: 260; --z-achievement: 270; --z-confetti: 300; --z-confirm: 400; /* TYPOGRAFI — Game Show: Bricolage display, Inter Tight body, JetBrains Mono codes. Emoji-fallback (Apple/Segoe/Noto Color Emoji) er lagt til SLUTT på alle stacker fordi Bricolage og Inter Tight ikke har emoji-glyfer. Uten dette faller emojis til en "tofu-square" på systemer der Bricolage er primary (Linux Chromium spesielt) — løste D-CP-D / D-038 / D-047 i kategorier + build-cat. */ --font-display: "Bricolage Grotesque", "Archivo Black", system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace; /* B (Bølge 1.8 / 2026-05-08): a11y text-scale token. Replaces the Bølge 1.7 `zoom: 1.12` approach, which scaled hit-targets + layout (broke modal sheet bottoms, sticky bars, and PartyKit input alignment on iOS). The token pattern scales ONLY font-size on hot-path selectors (calc( * var(--text-scale))), leaving paddings/gaps/buttons untouched so hit-targets remain identical. body.a11y-larger-text bumps the value to 1.15. */ --text-scale: 1; /* SPACING — Bølge 299 (2026-05-19): canonical spacing tokens. Single source of truth for the "golden rectangle" inset system and the gap/padding/rhythm vocabulary that's repeated as literals across 100+ selectors today. This block is FORWARD-LOOKING — it defines the target system. Selector refactors happen in subsequent waves (B299 ships the screen-root fixes; B300+ refactors cards, list rhythm, modal rhythm). Doctrine: INSETS = distance from a container edge to its content (screen = device edge; sheet = sheet edge; modal = card edge). GAPS = generic spacing between siblings (flex/grid gap, margin). PAD-* = card-internal padding tier (matches card-size convention). RHYTHM = semantic vertical rhythm between specific element pairs (eyebrow→title, title→body, section→eyebrow, card→cta, etc). See _audit/spacing-audit-2026-05-19.md for the per-screen audit that motivated this. */ /* === SPACING PRIMITIVES — flat scale, B334 (cluster 10) ===== */ --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-28: 28px; /* === INSETS — semantic alias of the primitives (B334) === */ --inset-screen: var(--space-12); /* gameplay content from device edge (= .app base) */ --inset-sheet: var(--space-16); /* sheet content from device edge (matches Profile/Club) */ --inset-modal: var(--space-20); /* modal-card content from card edge */ /* === GAPS — semantic alias of the primitives (B334) === */ --gap-tight: var(--space-4); --gap-xs: var(--space-6); --gap-sm: var(--space-8); --gap-md: var(--space-10); --gap-base: var(--space-12); /* .screen rhythm — 48 gap:12 sites, consumed by B335 */ --gap-lg: var(--space-14); --gap-xl: var(--space-16); --gap-xxl: var(--space-24); /* === MOTION — duration + easing, B326 ===================== */ --dur-instant: 80ms; /* micro — hover/press affordance */ --dur-fast: 120ms; /* default — most common transition */ --dur-base: 150ms; --dur-slow: 200ms; --dur-slowest: 400ms; --ease-default: ease; --ease-out: ease-out; --ease-spring: cubic-bezier(.2, .9, .3, 1); --ease-linear: linear; /* === ELEVATION (offset+blur depth-tiers) — B325 ===== */ --elev-1: 0 2px 6px; /* micro — affordance/pill/badge */ --elev-2: 0 4px 12px; /* small card */ --elev-3: 0 6px 18px; /* medium card (default) */ --elev-4: 0 8px 22px; /* emphasized card */ --elev-5: 0 14px 28px; /* floating panel */ --elev-6: 0 30px 60px; /* modal backdrop */ /* === CARD INTERNAL PADDING — semantic alias of the primitives (B334) === */ --pad-card-sm: var(--space-12); --pad-card-md: var(--space-16); --pad-card-lg: var(--space-22); --pad-card-xl: var(--space-28); /* === HEADING / VERTICAL RHYTHM === */ --rhythm-eyebrow-title: 4px; /* eyebrow → title */ --rhythm-title-body: 8px; /* title → body copy */ --rhythm-section-eyebrow: 10px; /* section → next section eyebrow */ --rhythm-panel-to-panel: 14px; /* panel → panel within a sheet */ --rhythm-card-to-cta: 14px; /* card → CTA row beneath it */ /* TYPOGRAPHY — Bølge 301 (2026-05-20): canonical typography tokens. Single source of truth for font-size / weight / line-height / letter-spacing. Speiler spacing-token-pakka fra B299 (Phase A). Alle fs-* tokens bruker calc(Npx * var(--text-scale)) — bytte til tokens gir AUTOMATISK a11y-skalering for de 45 raw-px-deklarasjonene som bypasser --text-scale i dag. FORWARD-LOOKING. Selectors konsumerer disse i wave B311/B312/B313 (master-plan referanse: design-system-audit-2026-05-20.md). */ /* === FONT SIZES — 8-step type scale (B405, 2026-05-28 · Stian) === calc-aware, respects --text-scale. Collapsed from the prior 13-step set, which had 1px steps at the small end (10/11/12/13/14/15/16) that nobody could distinguish — the drift magnet that bred the 8.5/9.5/10.5… half-pixels and ~38 distinct sizes across the app. Eight honest steps (~1.2–1.25 ratio). Enforced by scripts/check-font-sizes.mjs: every font-size must resolve through one of these tokens. The old 13-step names are kept as ALIASES below (snapped to the nearest new step) so existing var(--fs-*) references keep resolving. */ --fs-xs: calc(11px * var(--text-scale)); /* eyebrows, captions, badges */ --fs-sm: calc(13px * var(--text-scale)); /* dense / secondary body */ --fs-base: calc(15px * var(--text-scale)); /* default body, secondary CTAs */ --fs-md: calc(18px * var(--text-scale)); /* card titles, subheads, primary CTAs */ --fs-lg: calc(22px * var(--text-scale)); /* section headlines */ --fs-xl: calc(28px * var(--text-scale)); /* page headlines */ --fs-display: calc(36px * var(--text-scale)); /* hero text */ --fs-mega: calc(56px * var(--text-scale)); /* stamps / countdown (PANTSED etc.) */ /* Back-compat aliases → nearest 8-step value (old 13-step names). */ --fs-micro: var(--fs-xs); /* was 10px */ --fs-caption: var(--fs-xs); /* was 11px */ --fs-small: var(--fs-sm); /* was 12px */ --fs-body: var(--fs-sm); /* was 13px */ --fs-body-lg: var(--fs-base); /* was 14px */ --fs-lead: var(--fs-base); /* was 15px */ --fs-h6: var(--fs-base); /* was 16px */ --fs-h6-alt: var(--fs-lg); /* was 20px */ --fs-h5: var(--fs-md); /* was 18px */ --fs-h4: var(--fs-lg); /* was 22px */ --fs-h3: var(--fs-xl); /* was 28px */ --fs-h2: var(--fs-display);/* was 36px */ --fs-h1: var(--fs-mega); /* was 56px */ /* === FONT WEIGHTS — clean tier, adopt as-is === */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --fw-ultra: 900; /* === LINE HEIGHTS === */ --lh-flat: 1; /* display, single-line, badges */ --lh-ultra: 0.95; /* hero displays */ --lh-tight: 1.1; /* sub-displays, eyebrow stacks */ --lh-snug: 1.2; /* headlines */ --lh-cozy: 1.3; /* emphasized body */ --lh-normal: 1.4; /* default body reading */ --lh-relaxed: 1.5; /* long-form body */ /* === LETTER-SPACING (tracking) === */ --track-tightest: -0.03em; /* display hero */ --track-tight: -0.02em; /* body emphasis */ --track-body: -0.01em; /* default body */ --track-none: 0; /* explicit reset */ --track-loose: 0.04em; /* mild caps */ --track-caps-sm: 0.08em; /* small eyebrow */ --track-caps-narrow: 0.10em; /* narrow uppercase (27 sites) — B304.5 */ --track-caps-mid: 0.14em; /* eyebrow tracking — B321.1, §7 amendment */ --track-caps: 0.12em; /* default uppercase */ --track-caps-wide: 0.18em; /* wide eyebrow (dominant) */ /* COLOR ALPHA + BASE — Bølge 302 (2026-05-20). Alpha-skala dekker de mest brukte opacity/rgba-alpha-verdiene i CSS. Top 7 verdier dekker 51% av 1021 rgba()-forekomster (per color-opacity-audit). Disse er forward-looking — selectors konsumerer dem i refactor-waves B309/B310/B311. PRIMÆR REFACTOR-MØNSTER i senere waves: color-mix(in srgb, var(--token) X%, transparent) for "eksisterende token × alpha"-cases (~482 sites). ALPHA TOKENS BRUKES NÅR: a) standalone opacity: deklarasjoner b) rgba(255,255,255, ...) — bruker --overlay-white + alpha c) rgba(0,0,0, ...) — bruker --shadow-black + alpha */ /* === ALPHA SCALE === */ --alpha-faint: 0.04; /* near-invisible separator (60+ forekomster) */ --alpha-soft: 0.06; /* whisper overlays (103) */ --alpha-quiet: 0.10; /* card stroke baseline (90+) */ --alpha-dim: 0.18; /* stress card-stroke (47) — eksisterer som --pof-card-stroke-opacity */ --alpha-mid: 0.20; /* inactive surface tint (32) */ --alpha-quarter: 0.25; /* generic shadow/overlay */ --alpha-half: 0.40; /* disabled state (~70) */ --alpha-strong: 0.55; /* quiet text on dark (26) */ --alpha-near-full: 0.85; /* hover-quiet text (25) */ /* === BASE COLORS (for kombinasjoner med alpha) === */ --overlay-white: #fff; /* white overlays on dark surfaces (268 rgba() bruker dette i dag) */ --shadow-black: #000; /* shadow color base (105 rgba() bruker dette) */ /* STATE LAYERS — Bølge 303 (2026-05-20). Material 3-konvensjon: state-mønstre er semi-transparente overlays oppå base-farger, IKKE distinkte farger per state. Gjør temaer (vertikaler) dramatisk enklere — base-farger overstyres, state-laget bare fungerer. Eksisterende konsumenter (etter Phase 2 refactor): :hover → background: color-mix(in srgb, var(--overlay-white) calc(var(--state-hover-opacity) * 100%), var(--bg-base)); :disabled → opacity: var(--state-disabled-opacity); cursor: not-allowed; :active → transform: scale(var(--scale-press)); (motion-tokens B303-future) */ /* === STATE LAYERS === */ --state-hover-opacity: 0.08; /* white overlay strength */ --state-press-opacity: 0.12; /* deeper white overlay */ --state-disabled-opacity: 0.4; /* matcher 10× eksisterende :disabled-mønster */ --state-loading-opacity: 0.6; /* skeleton state */ --state-selected-opacity: 0.12; /* selected bg tint */ --state-focus-ring-width: 2px; /* outline width for :focus-visible */ --state-focus-ring-offset: 2px; /* outline-offset for :focus-visible */ /* SEMANTIC TOKEN LAYER — Bølge 303 (2026-05-20). Two-layer-token-system per moderne design-system-doctrine: atomic: --primary, --surface-card, --pantsy (rå verdier) semantic: --color-cta-default = var(--primary) (intent-mappet) Vertikal-spin-offs overstyrer SEMANTIC-laget. Atomic-laget kan stable bevares per vertikal, men semantic-mapping endres for å differensiere INTENT. Eksempel: "Pants on Fire for kids" kan beholde orange aksenter for spillmoment, men overstyre `--color-cta-default` til mint for å gi knappene egen identitet. Atomic-laget rør ingen forstyrrelse. */ /* === TEKST === */ --color-text-default: var(--text-on-deep); --color-text-secondary: var(--text-muted); --color-text-tertiary: var(--text-faint); --color-text-on-card: var(--text-on-card); --color-text-on-cta: var(--primary-on); --color-text-link: var(--accent-cool); --color-text-status-danger: var(--danger); --color-text-status-success: var(--success); /* === BAKGRUNNER === */ --color-bg-default: var(--surface-deep); --color-bg-elevated: var(--surface-mid); --color-bg-overlay: var(--surface-hi); --color-bg-recessed: var(--surface-lo); --color-bg-card: var(--surface-card); --color-bg-card-quiet: var(--surface-card-quiet); /* === CTA / INTERACTIVE === */ --color-cta-default: var(--primary); --color-cta-hover: var(--primary-hover); --color-cta-pressed: color-mix(in srgb, var(--primary) 80%, var(--ink)); --color-cta-disabled: color-mix(in srgb, var(--primary) 40%, transparent); --color-cta-on: var(--primary-on); /* === IDENTITET === */ --color-pantsy: var(--pantsy); /* role badge */ --color-smarty: var(--gold); /* best clue */ --color-positive: var(--pof-positive); /* === BORDERS (semantisk; atomic border-width definert i B304) === */ --color-border-default: color-mix(in srgb, var(--overlay-white) 8%, transparent); --color-border-strong: color-mix(in srgb, var(--overlay-white) 14%, transparent); --color-border-card: color-mix(in srgb, var(--gold) 13%, transparent); /* ICON SYSTEM — Bølge 303 (2026-05-20). Centralized icon-vocabulary — sizes, stroke-widths, label-gap. Bruker samme tier-tall som width/height-literal-mønstre (22/28/32/44) i sizing-auditen. */ /* === ICON SIZES === */ --icon-xs: 18px; --icon-sm: 22px; --icon-md: 28px; --icon-lg: 32px; --icon-xl: 36px; --icon-tap: 44px; /* tap-target — matcher --tap-min (B305) */ /* === ICON STROKES === */ --icon-stroke-thin: 0.5px; --icon-stroke-default: 1px; --icon-stroke-bold: 1.5px; /* === ICON-TIL-LABEL GAP === */ --icon-gap: 6px; /* default mellom ikon og label */ --icon-gap-tight: 4px; /* dense rows */ --icon-gap-loose: 8px; /* spacious rows */ } /* ── V3 STRESS SHIFT — Bølge 205 (2026-05-15) ────────────────────────── The visual half of Stress Mode. Pairs with the gameplay Stress Mode turn-order picker landing in B210 (HANDOVER_v2.md §"Stress Mode — disambiguation"): when Settings · Turn Order = Stress Mode, B210 sets window.__pantsyMode='stress', which modules/tokens.js mirrors onto . Overriding the radius + card-stroke tokens here cascades the emotional tightening to every consumer (sharper corners, harder card borders) with no per-component edits — the _pantsy10 useT() stress branch (radiusCard 28→16, radiusBtn 18→12, cardStrokeOpacity 0.15→0.28), expressed as a CSS token override since live reads tokens from CSS, not the JS token bag. Default (no attr / data-mode="baseline") is byte-identical to pre-B205. */ body[data-mode="stress"] { --radius-card: 16px; --radius-btn: 12px; --pantsy-radius-card: 16px; --pantsy-radius-btn: 12px; --pof-card-stroke-opacity: 0.28; }