/* ============================================================ HypeCity Tycoon — Design Tokens Day 26 Step 3d — Architectural Editorial migration Default :root is now CREAM (light). The legacy `--color-*` token names are preserved and re-mapped to canonical Architectural Editorial values (so existing Tycoon CSS keeps working without a call-site rename). Spec §6 #7: dark mode is preserved as opt-in via . No production page should default to it (play.html cleared in this step). ============================================================ */ :root, :root[data-theme="light"] { /* ── Canonical Architectural Editorial tokens (mirrors shared.css) ── */ --bg-base: #EAE7E0; /* concrete cream — canvas */ --bg-paper: #F1EEE7; /* paler cream — hero panels */ --bg-elevated: #DDD8CC; /* ghost buttons, well containers */ --bg-card: #F5F3EE; /* cards */ --bg-ink: #1F1D1A; /* inverted — footer + legal strip */ --bg-well: #D5CFC0; /* inputs, code blocks */ --rule-subtle: #D9D3C6; --rule-default: #BFB6A4; --rule-strong: #8B8273; --ink-primary: #1F1D1A; --ink-secondary: #5A554E; --ink-tertiary: #8B847A; --ink-muted: #B8B0A1; --ink-cta: #1F1D1A; --ink-cta-hover: #000000; --brass: #8B6F3D; --brass-hover: #745C30; --brass-deep: #5E4D2A; --brass-light: #C9A961; --brass-soft: rgba(139,111,61,0.08); --brass-soft-hi: rgba(139,111,61,0.14); --brass-border: rgba(139,111,61,0.30); --brass-emphasis: #B8893F; --gold: #C9A961; --gold-deep: #9A7C28; --gold-soft: rgba(201,169,97,0.12); --pos: #4A6B4A; --neg: #8B4444; --warn: #B8893F; --info: #6B6B6B; /* Signal ladder (SEC-safe — labels live in JS) */ --signal-sb: #4A6B4A; --signal-b: #5A7480; /* LOCKED Day 25: BUY slate-stone */ --signal-h: #6B6B6B; --signal-w: #B8893F; --signal-av: #8B4444; /* ── Legacy --color-* aliases — back-compat for unmigrated CSS ── * Tycoon CSS files (tycoon.css, dashboard.css, events.css, etc.) * still reference --color-primary / --color-bg etc. These aliases * let those rules render in the new palette without a call-site * rename. Long-term: rename each consumer to the canonical token * and retire this alias block. */ --color-primary: var(--brass); --color-primary-hover: var(--brass-hover); --color-primary-pressed: var(--brass-deep); --color-primary-glow: var(--brass-soft-hi); --color-bg: var(--bg-base); --color-surface: var(--bg-paper); --color-surface-elevated: var(--bg-elevated); --color-border-subtle: var(--rule-subtle); --color-border-default: var(--rule-default); --color-text-primary: var(--ink-primary); --color-text-secondary: var(--ink-secondary); --color-text-tertiary: var(--ink-tertiary); --color-text-disabled: var(--ink-muted); --color-success: var(--pos); --color-warning: var(--warn); --color-error: var(--neg); --color-info: var(--info); --color-gold: var(--gold); --color-gold-hover: var(--brass-light); --color-gold-subtle: var(--gold-soft); /* ── Typography ───────────────────────────────────────── */ --font-display: 'Fraunces', 'Times New Roman', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 48px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.0; --leading-normal: 1.4; --leading-relaxed: 1.6; /* ── Spacing (4px scale) ──────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* ── Border Radius ────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ── Shadows — paper/tactile (Architectural Editorial) ── */ --shadow-soft-1: 0 1px 2px rgba(31,29,26,0.05), 0 1px 1px rgba(31,29,26,0.04); --shadow-soft-2: 0 4px 12px rgba(31,29,26,0.08), 0 2px 4px rgba(31,29,26,0.04); --shadow-soft-3: 0 12px 28px rgba(31,29,26,0.12), 0 4px 8px rgba(31,29,26,0.06); --shadow-tactile-sm: 0 2px 0 0 var(--ink-primary); --shadow-tactile: 0 3px 0 0 var(--ink-primary); --shadow-tactile-lg: 0 5px 0 0 var(--ink-primary); --shadow-tactile-brass: 0 3px 0 0 var(--brass-deep); --shadow-tactile-brass-lg: 0 5px 0 0 var(--brass-deep); --shadow-tactile-gold: 0 3px 0 0 var(--gold-deep); --shadow-tactile-gold-lg: 0 5px 0 0 var(--gold-deep); /* Back-compat for unmigrated consumers */ --shadow-card: var(--shadow-soft-2); --shadow-modal: var(--shadow-soft-3); --shadow-hover: var(--shadow-soft-2); --shadow-glow: var(--shadow-tactile-brass), 0 6px 22px rgba(139,111,61,0.32); /* Hover tilt */ --tilt: 0.8deg; --tilt-neg: -0.8deg; /* ── Transitions ──────────────────────────────────────── */ --transition-default: 200ms ease-out; --transition-hover: 150ms ease-out; /* ── Layout ───────────────────────────────────────────── */ --nav-height: 56px; --subnav-height: 44px; --max-width: 1280px; --content-padding: var(--space-6); /* ── Ambient warmth (Night2 design pass) ──────────────────── A single restrained luminous accent kept inside the brass/gold family — "ambient cabin light", not a competing hue (glowing pink was tried and rejected as off-brand). Used only for hover/ elevated/active moments. See docs/inbox/agent-run-2026-05-22. */ --glow-brass: 0 0 0 1px rgba(139,111,61,0.10), 0 8px 24px rgba(139,111,61,0.18); --glow-brass-strong: 0 0 0 1px rgba(139,111,61,0.18), 0 10px 30px rgba(139,111,61,0.30); --glow-gold: 0 8px 26px rgba(201,169,97,0.26); --ambient-warm: radial-gradient(120% 90% at 50% -10%, rgba(201,169,97,0.10), transparent 62%); } /* ── Dark mode preserved as opt-in (spec §6 #7) ───────────── * Tycoon dark v1 — kept for the rare consumer that explicitly * sets . No production page defaults * to this anymore (Day 26 Step 3d). */ :root[data-theme="dark"] { --bg-base: #0A0A0A; --bg-paper: #161616; --bg-elevated: #1F1F1F; --bg-card: #161616; --bg-ink: #050505; --bg-well: #111111; --rule-subtle: #2A2A2A; --rule-default: #3A3A3A; --rule-strong: #4A4A4A; --ink-primary: #FFFFFF; --ink-secondary: #B0B0B0; --ink-tertiary: #707070; --ink-muted: #4A4A4A; --ink-cta: #FFFFFF; --ink-cta-hover: #FFFFFF; --color-primary: var(--brass-light); --color-primary-hover: #DEC07A; --color-primary-pressed: var(--brass-light); --color-primary-glow: rgba(201,169,97,0.30); --color-bg: var(--bg-base); --color-surface: var(--bg-paper); --color-surface-elevated: var(--bg-elevated); --color-border-subtle: var(--rule-subtle); --color-border-default: var(--rule-default); --color-text-primary: var(--ink-primary); --color-text-secondary: var(--ink-secondary); --color-text-tertiary: var(--ink-tertiary); --color-text-disabled: var(--ink-muted); } /* Smooth theme-flip transition (250ms, only on theme-affecting properties). Disabled with .no-transitions on body during initial-load to avoid flash. */ html:not(.no-transitions) body, html:not(.no-transitions) .card, html:not(.no-transitions) .btn, html:not(.no-transitions) .field-input, html:not(.no-transitions) .field-select { transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease; } /* ── Accessibility: honour reduced-motion globally (Night2 design pass) ── Was previously absent site-wide. Near-instant (not 0) durations keep transitionend/animationend handlers firing while removing the motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }