/* ========================================================================== tokens.css — the global design system -------------------------------------------------------------------------- This file is the single source of truth for how the game LOOKS. It contains no layout and no components — only named values. Two rules keep this useful: 1. Nothing anywhere else in the project may hard-code a colour, a radius, a shadow or a spacing value. If you need one, add it here first. 2. Nothing in this file is specific to an island. The Mysterious Shore, and every world after it, live in css/worlds.css. That separation is what lets a new world be added later without touching a single button. The palette was sampled from the approved master reference at assets/art/references/mysterious-shore-master-reference.png — a deep indigo-violet night lit by a warm rose sunset, with gold as the interface accent. Every text colour below was contrast-checked against the surface it sits on; the measured ratios are noted so they are not lost. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. GROUND & SURFACE Darkest at the back, lightest at the front — the further "forward" an element is, the lighter its surface. ------------------------------------------------------------------------ */ --color-ground-deep: #0C0D18; /* page behind everything */ --color-ground: #16142A; /* the night sky of the scene */ --color-surface: #241C3D; /* panels, dialog boxes */ --color-surface-raised:#302747; /* choice cards, things you press */ /* Translucent versions, used where the artwork must show through. */ --color-surface-veil: rgba(36, 28, 61, 0.82); --color-scrim: rgba(12, 13, 24, 0.55); /* ------------------------------------------------------------------------ 2. TWILIGHT — the mood colours, taken from the reference art These are atmosphere: glows, hazes and edges. They are NOT text colours. ------------------------------------------------------------------------ */ --color-twilight-violet: #514163; --color-twilight-haze: #726294; --color-twilight-rose: #C47586; /* the sunset band */ --color-twilight-warm: #DF9E8A; /* where the sun still touches */ /* ------------------------------------------------------------------------ 3. GOLD — the interface accent, on every screen of every world ------------------------------------------------------------------------ */ --color-gold: #E3B23C; /* 9.2:1 on ground */ --color-gold-bright: #F5D27A; /* 12.3:1 — hover and glow */ --color-gold-deep: #A97A1E; /* edges and pressed states, never text */ /* ------------------------------------------------------------------------ 4. TEXT ------------------------------------------------------------------------ */ --color-text: #F3E6CF; /* 14.6:1 on ground */ --color-text-soft: #C9BFD6; /* 10.2:1 — secondary text */ /* ------------------------------------------------------------------------ 5. MEANING Each of these is always paired with an icon and words. Colour is never the only thing telling the player what happened. ------------------------------------------------------------------------ */ --color-success: #6EE7A8; /* 11.7:1 */ --color-failure: #FF8F8F; /* 8.2:1 */ --color-health: #FF6B7A; /* 6.5:1 */ --color-xp: #7FD8F0; /* 11.1:1 */ --color-coin: #F0B429; /* 9.7:1 */ --color-magic: #C3A6F2; /* 8.9:1 — the magic counter and its motes */ /* ------------------------------------------------------------------------ 5b. THE THREE PATHS Shared by every world — the Forest, Cave and Mountain choices keep the same identity wherever they appear. js/ui.js only ever points --path-hue at one of these; it never knows the colour itself. ------------------------------------------------------------------------ */ --path-forest: #7BC98F; /* 9.1:1 on ground */ --path-cave: #7FD8F0; /* 11.1:1 */ --path-mountain: #E0BE96; /* 10.3:1 */ /* ------------------------------------------------------------------------ 5c. TINTS See-through versions of the colours above, for fills, glows and washes. They live here for the same reason everything else does: so that changing the gold changes every glow in the game, not just some of them. ------------------------------------------------------------------------ */ --tint-gold-08: rgba(227, 178, 60, 0.08); --tint-gold-14: rgba(227, 178, 60, 0.14); --tint-gold-20: rgba(227, 178, 60, 0.20); --tint-gold-30: rgba(227, 178, 60, 0.30); --tint-gold-35: rgba(227, 178, 60, 0.35); --tint-gold-40: rgba(227, 178, 60, 0.40); --tint-gold-45: rgba(227, 178, 60, 0.45); --tint-bright-12: rgba(245, 210, 122, 0.12); --tint-bright-34: rgba(245, 210, 122, 0.34); --tint-bright-45: rgba(245, 210, 122, 0.45); --tint-bright-50: rgba(245, 210, 122, 0.50); --tint-bright-55: rgba(245, 210, 122, 0.55); --tint-success-30: rgba(110, 231, 168, 0.30); --tint-failure-28: rgba(255, 143, 143, 0.28); --tint-failure-30: rgba(255, 143, 143, 0.30); --tint-ground-25: rgba(12, 13, 24, 0.25); --tint-ground-35: rgba(12, 13, 24, 0.35); --tint-ground-40: rgba(12, 13, 24, 0.40); --tint-shadow-35: rgba(0, 0, 0, 0.35); --tint-light-04: rgba(255, 255, 255, 0.04); --tint-light-16: rgba(255, 255, 255, 0.16); /* Label colour on a filled gold button, and the focus ring. The ring is pure white on purpose: it must stay visible against both the interface and any artwork behind it. */ --color-on-gold: #FFF3D6; --color-focus: #FFFFFF; /* ------------------------------------------------------------------------ 6. BORDERS ------------------------------------------------------------------------ */ --border-gold: 1px solid rgba(227, 178, 60, 0.28); --border-gold-firm: 2px solid rgba(227, 178, 60, 0.55); --border-soft: 1px solid rgba(201, 191, 214, 0.14); /* ------------------------------------------------------------------------ 7. DEPTH — three tiers, and no more than three "Glow" is a reward, not decoration: only the single most important control on a screen is allowed to have it. ------------------------------------------------------------------------ */ --shadow-card: 0 18px 60px rgba(0, 0, 0, 0.5); --shadow-panel: 0 10px 34px rgba(0, 0, 0, 0.42); --glow-gold: 0 0 24px rgba(227, 178, 60, 0.35); --glow-strong: 0 0 40px rgba(245, 210, 122, 0.45); --glow-success: 0 0 34px rgba(110, 231, 168, 0.32); --glow-failure: 0 0 30px rgba(255, 143, 143, 0.28); /* ------------------------------------------------------------------------ 8. CORNER RADIUS ------------------------------------------------------------------------ */ --radius-pill: 999px; --radius-card: 20px; --radius-control: 16px; --radius-chip: 10px; /* ------------------------------------------------------------------------ 9. SPACING — a 4px base, so every gap is a multiple of the same unit ------------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.75rem; /* 28px */ --space-6: 2.5rem; /* 40px */ /* ------------------------------------------------------------------------ 10. CONTROL SIZES 44px is the accessibility floor for anything a finger touches. Nothing in this game is ever allowed below it. ------------------------------------------------------------------------ */ --tap-min: 44px; --tap-comfort: 52px; --tap-choice: 76px; --tap-choice-landscape: 66px; /* ------------------------------------------------------------------------ 11. TYPOGRAPHY -------------------------------------------------------------------------- The production faces (Fraunces for display, Commissioner for body) are NOT installed yet. They are named first in each stack, so the moment the two .woff2 files are added and the @font-face rules at the bottom of this file are uncommented, the whole game picks them up with no other change. Until then the browser falls through to the local fallbacks below. ------------------------------------------------------------------------ */ --font-display: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif; --font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Type scale. clamp(min, Xvmin, max) is deliberate: vmin tracks the SHORTER screen edge, so turning a phone sideways does not inflate the headings at the exact moment there is less height to fit them. */ --text-display: clamp(2rem, 11vmin, 4rem); --text-heading: clamp(1.35rem, 6vmin, 2rem); --text-body: clamp(0.95rem, 4vmin, 1.1rem); --text-label: 1.05rem; --text-meta: 0.85rem; --tracking-display: 0.06em; --tracking-label: 0.1em; /* ------------------------------------------------------------------------ 12. MOTION Every duration in the game comes from here, so the whole thing can be slowed down or sped up in one place. ------------------------------------------------------------------------ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-press: 120ms; --dur-quick: 260ms; --dur-screen: 320ms; --dur-reward: 700ms; /* ------------------------------------------------------------------------ 13. LAYOUT ------------------------------------------------------------------------ */ --app-max-width: 1100px; --panel-max-width: 34rem; --reading-max: 60ch; } /* ========================================================================== PRODUCTION FONTS — not yet installed -------------------------------------------------------------------------- TO ENABLE (Phase 3C or whenever the files are ready): 1. Put Fraunces-var.woff2 and Commissioner-var.woff2 in assets/fonts/ (latin subset only — the two files together should stay under 120 KB) 2. Delete the surrounding comment markers below 3. Add both paths to CORE_FILES in service-worker.js and bump CACHE_VERSION Nothing else needs to change: the font stacks above already name them first. @font-face { font-family: "Fraunces"; src: url("../assets/fonts/Fraunces-var.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Commissioner"; src: url("../assets/fonts/Commissioner-var.woff2") format("woff2-variations"); font-weight: 300 600; font-display: swap; } ========================================================================== */