/* GoStargazing — design tokens. * * One file drives the visual language for every page: map, observatory, demo, * sandbox, design-doc. Rebranding is an edit here. * * Tokens are grouped as: * · Environmental (--daylight — driven by JS from sun altitude) * · Color (--ink, --bg, --panel, --border, --accent, --good/warn/bad) * · Typography (--font-*, --fs-*) * · Space (--sp-* on a 4px grid) * · Radii / elevation (--radius-*, --shadow-*) * · Motion (--t-* durations) * * Themes: default is deep-space. [data-theme="chart"] is a cool-navy variant, * defined but not used by default — it exists to prove the token system * supports alternate brand images without a second stylesheet. */ :root { /* --- Environmental --------------------------------------------------- */ /* 0 = astronomical night, 1 = noon. JS writes this on from the resolved state's sun altitude. Colors below interpolate against it so panels stay readable over any sky background. */ --daylight: 0; /* --- Ink (foreground text) ------------------------------------------- */ /* Three ink levels against the dark parchment panel. All three are warm * off-whites so they stay related to the paper tone rather than reading * as "gray text on dark bg." Tuned so even the faintest level remains * legible on the paper base (contrast ratio > 10:1 at night). * * --ink primary (brand, titles, values) * --ink-dim secondary labels, legends, nav links * --ink-faint captions, meta, small-print. NOT as dark as it was on * the previous glass surfaces — paper absorbs low-luminance * text and renders it unreadable. */ --ink: #e8e6df; --ink-dim: color-mix(in oklab, #b2b0a3, #e4e2d4 calc(var(--daylight) * 40%)); --ink-faint: color-mix(in oklab, #8a8879, #c0beae calc(var(--daylight) * 55%)); /* --- Surfaces -------------------------------------------------------- * --panel is a two-stop gradient: a subtle warm highlight at the top * rolling into cooler dark at the bottom. Pairs with backdrop-filter: * blur to produce a glassy, dimensional surface instead of a flat slab. * Daylight factor still scales overall opacity so panels dim/brighten * with the sky. */ --bg: #07080b; /* --- Paper texture --------------------------------------------------- * Surfaces are rendered as dark parchment — opaque, matte, with a soft * fractal grain and gentle mottling. This replaces the earlier * glass/translucent direction: paper is easier to read, earthier, and * sits better against the deep-space palette. * * Two overlaid grain layers: * --grain-fine: hi-frequency cream speckle (paper fibers) * --grain-mottle: lo-frequency cream wash (tonal variation) * Both use fractalNoise for smoother, less static-looking texture. */ --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.88 0 0 0 0 0.74 0.22 0 0 0 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.82 0 0 0 0 0.68 0.14 0 0 0 0'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23m)'/%3E%3C/svg%3E"); /* Panel base tone — warm dark parchment. Opaque. * * Reacts to --daylight: subtly warms + lightens at noon, settles back * to deep earthy dark at astronomical night. Uses color-mix to * interpolate between a night base and a day base per stop. * * night (--daylight = 0): top rgb(14,12,11) → bot rgb(7,6,6) * day (--daylight = 1): top rgb(30,25,20) → bot rgb(16,13,12) */ --paper-top: color-mix(in oklab, rgb(14, 12, 11), rgb(30, 25, 20) calc(var(--daylight) * 100%)); --paper-bot: color-mix(in oklab, rgb(7, 6, 6), rgb(16, 13, 12) calc(var(--daylight) * 100%)); --panel: var(--grain-fine), var(--grain-mottle), linear-gradient(176deg, var(--paper-top) 0%, var(--paper-bot) 100%); /* --- Borders --------------------------------------------------------- */ --border: rgba(232, 230, 223, calc(0.08 + var(--daylight) * 0.10)); --border-strong: rgba(232, 230, 223, calc(0.18 + var(--daylight) * 0.14)); /* --- Accent + status ------------------------------------------------- */ --accent: oklch(0.82 0.13 75); --accent-dim: oklch(0.82 0.13 75 / 0.35); --good: oklch(0.78 0.15 145); --warn: oklch(0.78 0.16 55); --bad: oklch(0.70 0.17 25); /* Semi-transparent tints of status colors for chips/badges */ --good-dim: oklch(0.78 0.15 145 / 0.18); --warn-dim: oklch(0.78 0.16 55 / 0.18); --bad-dim: oklch(0.70 0.17 25 / 0.18); /* --- Typography ------------------------------------------------------ */ --font-display: 'Instrument Serif', ui-serif, Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace; --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12px; --fs-lg: 13px; --fs-xl: 16px; --fs-2xl: 20px; --fs-3xl: 28px; --tracking-tight: 0.01em; --tracking-normal: 0.04em; --tracking-wide: 0.18em; --tracking-widest: 0.30em; /* --- Space (4px grid) ------------------------------------------------ */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* --- Radii ----------------------------------------------------------- */ --radius-0: 0; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px; /* --- Elevation ------------------------------------------------------- */ --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); /* --- Motion ---------------------------------------------------------- */ --t-fast: 150ms; --t-med: 300ms; --t-slow: 700ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* Cool-navy variant, kept for reference / future rebranding. To activate, set or apply the attribute to a container. */ [data-theme="chart"] { --ink: #c8cdd8; --ink-dim: #8890a8; --ink-faint: #5a6280; --bg: #0a0e1a; --panel: rgba(12, 16, 30, 0.92); --border: rgba(100, 120, 180, 0.25); --border-strong: rgba(100, 120, 180, 0.45); --accent: #6480ff; --accent-dim: rgba(100, 128, 255, 0.35); --good: #5cc878; --warn: #c8a03c; --bad: #c85050; --good-dim: rgba(92, 200, 120, 0.15); --warn-dim: rgba(200, 160, 60, 0.15); --bad-dim: rgba(200, 80, 60, 0.15); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; } }