/* ========================================================================== Mealborne — Design Tokens (CSS) ========================================================================== SSoT for brand + frame + spacing + type + motion, expressed as CSS custom properties so any stylesheet or inline style can consume `var(--c-onyx)`, `var(--frame-bg)`, etc. Mirrors the locked v2 design system authored in: - ART_BIBLE.md (palette §3, §4) - logo-mealborne-LOCKED-v2.html (Forum wordmark, Aged Bronze) - ui-chrome-mealborne-v2.html (D2 frame, tokens, 9-slice spec) - affinity-chips-mealborne-v1.html (chip system) - packages/core/src/data/affinity-display.js (affinity SSoT) WAVE 1 (2026-04-25): Foundation only. Linking this file adds the tokens to the page but applies NO visual change. Wave 2 rethemes screens to consume these tokens. RULES • Never hardcode a brand color, spacing value, or type size in a component's CSS. Reach for var(--c-*), var(--s-*), var(--t-*). • If an affinity hex changes in affinity-display.js, update the matching --c-aff-* here too. (CSS has no runtime import.) • Ionic variables (if/when Ionic React is added) go in a separate sheet that overrides --ion-* with references to our --c-* tokens. ========================================================================== */ /* --- Forum typeface (display — wordmark, inscriptional headings) ------- Loaded via Google Fonts for now. TODO pre-App-Store-ship: self-host the .woff2 file to apps/prototype/public/fonts/forum.woff2 and swap this @import for a local @font-face declaration so the app works offline. Forum is SIL Open Font License — commercial use OK. --- */ @import url('https://fonts.googleapis.com/css2?family=Forum&family=Cormorant+Garamond:ital@0;1&family=JetBrains+Mono:wght@300;400;500&display=swap'); :root { /* ============ COLOR · 24-color ART_BIBLE §3 palette ================== */ /* Neutrals — Stone & Bone (6) */ --c-onyx: #1a1420; /* primary outline, darkest shadows, logo ground */ --c-plum: #2d2337; /* secondary shadow, cave depths */ --c-stone: #544c57; /* mid-neutral, architecture, armor */ --c-bone: #e8dcc0; /* warm highlight on characters */ --c-parchment: #f2e8d0; /* UI background (light contexts), scroll interiors */ --c-ivory: #fff5dc; /* specular highlight, rim light — use sparingly */ /* Hearth Warms (4) — bronze system is locked logo palette */ --c-ember: #c43620; /* Ember Red — Ember Fox body, hearth fires, Warrior VFX sibling */ --c-amber: #e8931a; /* Amber Fire — warm accent, firelight */ --c-bronze-top: #f2b838; /* Harvest Gold — top of bronze gradient, Gold currency, logo highlight */ --c-bronze-mid: #8a7d3a; /* Lichen Bronze — mid-bronze, frames, rules, subtitles */ --c-bronze-shadow: #5a4020; /* deep bronze — bottom of gradient */ --c-rose: #d8694a; /* Hearth Rose — warm soft shadow on flesh/fur */ /* Earthen & Greens (3) — Moss Turtle + Starter Meadow */ --c-moss: #5a7c3a; /* Moss Turtle body, foliage mid-tone */ --c-forest: #2d4d28; /* foliage shadow, earth shadow */ --c-lichen: #8a7d3a; /* alias for bronze-mid (same hex, different context) */ /* Cools & Skies (4) — Storm Owlet + Windswept Coast + Shadow Citadel */ --c-indigo: #2d3a5c; /* Storm Indigo — Storm Owlet body, storm clouds */ --c-slate: #5a7aa8; /* Wind Slate — sky, water mid-tone */ --c-violet: #5a3d7c; /* Twilight Violet — Shadow Citadel ambient, Alchemist VFX */ --c-void: #1a1030; /* Void Ink — Shadow Citadel deep, abyss */ /* Water & Crystal (4) — Dew Rabbit + Coast + Crystal Caves */ --c-seafoam: #7cb8a8; /* Dew Rabbit body, coastal water highlight */ --c-glacier: #b8d8e0; /* cool highlight, ice */ --c-teal: #3a8a8a; /* Crystal Caves geometry */ --c-prism: #d88ab0; /* Crystal Caves refraction accent */ /* Magic & Metal (3) — Sage + Berserker + Soul Gem */ --c-sage: #d4ba5a; /* Sage VFX sibling, arcane text glow */ --c-berserker: #7a1a1a; /* Berserker VFX sibling (differentiated from Warrior red) */ --c-soul: #c8a0e8; /* Soul Gem currency, trophy gilding glow, ritual effects */ /* ============ COLOR · AFFINITY SSoT ================================== These hex values are INHERITED from packages/core/src/data/affinity-display.js. Never override here. If the JS SSoT changes a value, update the matching token below — the JS module is authoritative, this is a CSS mirror. */ --c-aff-warrior: #ef4444; --c-aff-scout: #22c55e; --c-aff-guardian: #3b82f6; --c-aff-alchemist: #a855f7; --c-aff-berserker: #dc2626; --c-aff-sage: #eab308; --c-aff-wandering: #94a3b8; --c-info: #60a5fa; /* Info / neutral-action blue — info-btn family */ /* ============ FRAME SYSTEM · D2 Double-Rule Plaque (locked v2) ======== The canonical Mealborne chrome frame. Used by modals, cards, tooltips, chip borders, and the App Store monogram tile. Every surface that should read as "authored Mealborne UI" consumes these values. */ --frame-outer-weight: 2px; --frame-outer-color: var(--c-bronze-mid); --frame-inner-weight: 1px; --frame-inner-color: rgba(138, 125, 58, 0.55); --frame-bg: var(--c-onyx); --frame-corner-size: 6px; --frame-corner-color: var(--c-bronze-top); --frame-padding: 6px; --frame-radius: 2px; /* ============ BRONZE GRADIENT · Aged (locked v2 logo material) ======== The material used in the wordmark, monogram, currency icons, macro icons, and all inscription accents. No Ivory Glow top stop — that was the FitQuest gold-JRPG gloss we killed. */ --bronze-gradient-aged: linear-gradient(180deg, var(--c-bronze-top) 0%, var(--c-bronze-mid) 40%, var(--c-bronze-shadow) 100%); /* ============ TYPOGRAPHY · Families ================================== */ --font-display: 'Forum', 'Marcellus SC', serif; /* wordmark, inscriptional headings */ --font-body: 'Forum', serif; /* body copy in ceremonial contexts */ --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* utility UI, lists, forms */ --font-script: 'Cormorant Garamond', serif; /* italic flavor / lore text */ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Monaco, Menlo, monospace; /* stats, numerics, labels */ /* ============ TYPOGRAPHY · Size scale ================================ Matches apps/prototype/src/design/tokens.js fontSize keys so CSS and JS stay in lockstep. */ --t-micro: 9px; --t-tiny: 10px; --t-xs: 11px; --t-sm: 12px; --t-md: 13px; /* primary body in prototype */ --t-lg: 14px; --t-xl: 16px; --t-xxl: 18px; --t-hero: 20px; --t-display: 24px; --t-giant: 40px; --t-mega: 48px; /* ============ TYPOGRAPHY · Letter-spacing (locked v2 inscription) ==== */ --ls-tight: 1px; --ls-normal: 3px; --ls-wide: 5px; --ls-inscription: 8px; /* MEALBORNE wordmark tracking */ /* ============ SPACING · 4px base ladder ============================= --s-N = N × 4px. Use --s-* for new CSS; the older spacing.* named keys (xxs/xs/sm/md/...) live in tokens.js for JS consumers and will be migrated to the numeric ladder when a screen is retheemed. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ============ RULE WEIGHTS ============================================ */ --rule-hair: 0.5px; --rule-thin: 1px; --rule-med: 2px; --rule-thick: 3px; /* ============ RADII =================================================== */ --r-sharp: 0; --r-subtle: 2px; /* tooltips, buttons, chips */ --r-card: 4px; --r-tile: 8px; --r-modal: 10px; --r-icon: 28px; /* App Store tile internal radius */ --r-pill: 9999px; /* ============ SHADOW / ELEVATION ====================================== */ --shadow-low: 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-med: 0 4px 12px rgba(0, 0, 0, 0.50); --shadow-high: 0 8px 24px rgba(0, 0, 0, 0.60); /* ============ MOTION · Duration tokens (ms) ========================== */ --motion-instant: 0ms; --motion-snap: 120ms; /* hover, button press */ --motion-fade: 200ms; /* card enter/exit */ --motion-slide: 300ms; /* screen transitions */ --motion-smooth: 500ms; /* progress bar fills */ --motion-narrative: 800ms; /* dialogue beat spacing */ --motion-ceremony: 1800ms; /* per-beat ceremonial moments */ /* ============ MOTION · Easing ========================================= */ --ease-linear: linear; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ============ Z-INDEX ladder ========================================== */ --z-base: 0; --z-card: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 9999; } /* -------------------------------------------------------------------------- Pixel-art rendering discipline ART_BIBLE §2: sprites render with nearest-neighbor scaling, never smoothed. Apply .mb-pixel to any or element with pixel-art background-image. -------------------------------------------------------------------------- */ .mb-pixel, .mb-pixel img, img.mb-pixel { image-rendering: pixelated; image-rendering: crisp-edges; /* Firefox fallback */ -ms-interpolation-mode: nearest-neighbor; } /* -------------------------------------------------------------------------- End of tokens.css -------------------------------------------------------------------------- Wave 2 will add: .mb-frame (D2 9-slice class), .mb-btn (button states), .mb-chip (affinity chip), .mb-modal (composed frame + layout), and .mb-wordmark (Forum + Aged Bronze logo treatment). Those live in SEPARATE files (frame.css, chip.css, etc.) so this tokens file stays lean — one place to change an atomic value, zero component logic mixed in. -------------------------------------------------------------------------- */