/* ============================================ DETROIT TECHNO PARK — DESIGN TOKENS Brand variables and font definitions. AESTHETIC: pure white + futuristic chrome. - White page bg, no section panel alternation - Cards as raised neumorphic chips with subtle off-white tone - Mono-led labels (Moonhouse display, Inter body, JetBrains Mono caps) - Single restrained accent (deep cyan) Every brand variable is prefixed `--park-`. ============================================ */ /* -------------------------------------------- FONT DEFINITIONS — self-hosted -------------------------------------------- */ /* Moonhouse — display headline font (user-supplied) */ @font-face { font-family: 'Moonhouse'; src: url('../fonts/moonhouse.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* ---------- BRAND COLORS — Detroit Techno Park (light mode) ---------- Token Hex Use --park-bg #E8E9EC Page bg, deepest light surface --park-surface #F0F1F4 Card / panel bg, raised surface --park-surface-warm#F4F5F8 Alt panel tone, slightly brighter --park-chrome-light#FFFFFF Highlight, top edge of chrome shadows --park-chrome-mid #D1D5DB Mid chrome, hairline borders --park-chrome-dark #AEB4BC Deep chrome, bottom edge of shadows --park-shadow-warm rgba(135,137,155,0.22) Subtle elevation shadow --park-ink #1B1E27 Headlines / strongest text --park-text #3A3D49 Default body text --park-text-mid #5A5D6B Sub copy --park-text-dim #9FA1AD Muted / dim --park-line rgba(56,60,75,0.10) Hairline dividers --park-line-strong rgba(56,60,75,0.20) --park-cyan #0AA9C0 Primary accent (recalibrated for light bg) --park-cyan-deep #006C7D Hover state on cyan --park-magenta #A8348C Secondary accent (very sparingly) */ /* Surfaces — pure white page, near-white card tone so neumorphic still reads */ --park-bg: #FFFFFF; --park-surface: #F4F6F9; /* card surface — barely off-white, lets shadows register */ --park-surface-warm: #F8FAFC; /* alt card tone, even softer */ --park-tint-cool: #EEF3F6; /* soft cool-cyan tinted section bg, breaks white-on-white monotony */ --park-tint-warm: #F9F5EE; /* alt warm cream tint */ --park-chrome-light: #FFFFFF; --park-chrome-mid: #D6DAE0; --park-chrome-dark: #AEB4BC; /* Legacy aliases — kept so existing component CSS continues to work */ --park-black: var(--park-bg); --park-black-hover: var(--park-surface); --park-ink: var(--park-surface); --park-ink-warm: var(--park-surface-warm); --park-deep: #EDF0F4; /* very subtle cool tint for footer differentiation only */ --park-deep-hover: #E5E8ED; --park-shadow: #E8EAEF; /* Type */ --park-ink-text: #1B1E27; --park-text: #3A3D49; --park-text-mid: #5A5D6B; --park-text-dim: #9FA1AD; --park-white: var(--park-text); /* legacy alias — body text */ --park-pure: var(--park-ink-text); /* legacy alias — strongest heading */ --park-bone: var(--park-text-mid); /* legacy alias — secondary copy */ --park-mist: var(--park-text-dim); /* legacy alias — muted */ /* Lines / dividers */ --park-line: rgba(56, 60, 75, 0.10); --park-line-strong: rgba(56, 60, 75, 0.20); /* Accent */ --park-cyan: #0AA9C0; --park-cyan-hover: #006C7D; --park-cyan-deep: #006C7D; --park-magenta: #A8348C; --park-magenta-hover:#7A1F66; /* ---------- NEUMORPHIC SHADOW SYSTEM ---------- Dual-shadow technique: a warm shadow below-right and a cool highlight above-left create the illusion of a raised metal surface. Pressed variants invert these (inset). Used on cards, buttons, dials. */ --park-shadow-warm: rgba(135, 137, 155, 0.40); --park-shadow-warm-soft: rgba(135, 137, 155, 0.22); --park-shadow-cool: rgba(255, 255, 255, 0.95); --park-shadow-cool-soft: rgba(255, 255, 255, 0.75); /* Raised surfaces */ --park-neu-raised: 8px 8px 18px var(--park-shadow-warm), -6px -6px 16px var(--park-shadow-cool); --park-neu-raised-sm: 4px 4px 10px var(--park-shadow-warm-soft), -3px -3px 8px var(--park-shadow-cool-soft); --park-neu-raised-lg: 12px 12px 28px var(--park-shadow-warm), -10px -10px 24px var(--park-shadow-cool); /* Pressed / inset surfaces */ --park-neu-pressed: inset 4px 4px 8px var(--park-shadow-warm), inset -3px -3px 6px var(--park-shadow-cool); --park-neu-pressed-sm: inset 2px 2px 5px var(--park-shadow-warm-soft), inset -2px -2px 4px var(--park-shadow-cool); /* Legacy aliases — keep names that existing component CSS may reference */ --park-elevation: var(--park-neu-raised-sm); --park-elevation-sm: var(--park-neu-raised-sm); --park-elevation-pressed:var(--park-neu-pressed-sm); /* ---------- CHROME GRADIENTS ---------- The radial gradient that makes a circular chrome surface look "lit from above-left". Used on buttons, dials, slider thumbs. */ --park-chrome-radial: radial-gradient(circle at 35% 30%, var(--park-chrome-light) 0%, var(--park-surface) 45%, var(--park-chrome-dark) 100%); --park-chrome-linear: linear-gradient(135deg, var(--park-chrome-light) 0%, var(--park-surface) 45%, var(--park-chrome-dark) 100%); --park-chrome-face: radial-gradient(circle at 30% 30%, #F5F6F8 0%, #D8DBE0 100%); /* Glass surface — translucent + frosted */ --park-glass-bg: rgba(255, 255, 255, 0.55); --park-glass-bg-strong: rgba(255, 255, 255, 0.78); --park-glass-border: rgba(255, 255, 255, 0.72); --park-glass-blur: saturate(160%) blur(14px); --park-glass-glare: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0) 100%); /* Holographic conic gradient — used VERY sparingly as ornament (single hero halo, never as primary signature) */ --park-aurora: conic-gradient(from 180deg, rgba(10, 169, 192, 0.12) 0%, rgba(168, 52, 140, 0.10) 25%, rgba(255, 200, 80, 0.10) 50%, rgba(10, 169, 192, 0.12) 75%, rgba(10, 169, 192, 0.12) 100%); /* Brand gradient — used very rarely */ --park-gradient: linear-gradient(90deg, var(--park-cyan) 0%, var(--park-magenta) 100%); /* ---------- SEMANTIC COLORS ---------- */ --color-bg: var(--park-bg); --color-text: var(--park-text); --color-heading: var(--park-ink-text); --color-accent: var(--park-cyan); --color-link: var(--park-cyan-deep); --color-link-hover: var(--park-ink-text); /* ---------- TYPOGRAPHY ---------- */ /* Display — Heebo for headlines (calm, geometric, restrained). Body — Montserrat for paragraphs and UI (warmer humanist sans with presence). Label — Mulish for tracked-caps labels, eyebrows, stat labels. Proportional (not monospaced) so numeric columns won't perfectly align — trade-off for a warmer, more humanist tone than JetBrains Mono. */ --font-display: 'Heebo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif; /* Moonhouse — opt-in via --font-moonhouse on specific elements only (brand mark) */ --font-moonhouse: 'Moonhouse', 'Heebo', sans-serif; --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif; --font-mono: 'Mulish', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif; /* Type scale (mobile-first) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 2.75rem; /* 44px */ --text-5xl: 3.5rem; /* 56px */ --leading-tight: 1.06; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tightest: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.18em; --tracking-widest: 0.28em; /* ---------- SPACING SCALE ---------- */ --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; --space-10: 8rem; --space-11: 10rem; /* ---------- LAYOUT ---------- */ --container-narrow: 760px; --container: 1200px; --container-wide: 1400px; --container-xwide: 1600px; --gutter: var(--space-5); --gutter-lg: var(--space-7); /* ---------- BORDERS / RADIUS ---------- */ --radius-sm: 4px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ---------- TRANSITIONS ---------- */ --transition-fast: 150ms ease; --transition: 250ms ease; --transition-slow: 500ms ease; /* ---------- ELEVATIONS (flat — for cards) ---------- */ --shadow-sm: 0 1px 2px rgba(56, 60, 75, 0.06); --shadow: 0 6px 20px rgba(56, 60, 75, 0.08); --shadow-lg: 0 20px 48px rgba(56, 60, 75, 0.12); /* ---------- HEADER ---------- */ --header-height: 72px; --announcement-height: 36px; } /* ---------- DESKTOP TYPE SCALE (>= 768px) ---------- */ @media (min-width: 768px) { :root { --text-md: 1.125rem; --text-lg: 1.5rem; --text-xl: 2rem; --text-2xl: 2.75rem; --text-3xl: 3.5rem; --text-4xl: 4.75rem; --text-5xl: 6.5rem; } }