/* ============================================================================ SUPER EXTRA MEGA — centralized design system (temp042) Revision A is the ACTIVE default. Three alternative presets are provided INACTIVE below; activate one by setting (etc.) — see DESIGN.md. All components read these tokens; do not hard-code colors, spacing, or motion in component CSS. ============================================================================ */ :root { /* ---- surfaces (dark, default) ---- */ --bg: #0b0e14; --bg2: #0d1118; --surface: rgba(17,21,29,.78); --panel: rgba(14,18,25,.92); --line: rgba(232,235,240,.14); --line2: rgba(232,235,240,.07); /* ---- text (all >= 4.5:1 on --bg / --surface) ---- */ --text: #e8ebf0; --muted: #aab3c0; --subtle: #8b95a3; /* ---- accents (restrained; teal leads) ---- */ --accent: #6ee0cf; --accent-ink: #6ee0cf; --accent-2: #4bbfae; --violet: #a99ff0; --blue: #7fb7f7; --warm: #e0aa6e; --ok: #7ee0ac; --warn: #e0aa6e; --danger: #ef9a9a; --focus: #6ee0cf; /* ---- typography ---- */ --font: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-display: "Archivo Black", "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.5rem; /* ---- home-aligned public page type scale ---- */ --type-page-title: clamp(2rem, 4vw, 2.5rem); --type-page-lede: clamp(.9375rem, 1.2vw, 1rem); --type-product-title: clamp(1.75rem, 3.2vw, 2.25rem); --type-section-title: clamp(1.375rem, 2.1vw, 1.9375rem); --type-metric: clamp(2rem, 3.6vw, 2.625rem); /* ---- title finish (grid-clad metallic) ---- */ --title-metal: linear-gradient(166deg, #f0f3f7 10%, #b6bfca 48%, #67727f 88%); --title-grid: rgba(232,235,240,.13); --title-grid-size: 13px; --title-shadow: drop-shadow(7px 9px 0 rgba(3,5,9,.55)) drop-shadow(2px 3px 0 rgba(3,5,9,.75)); --title-perspective: 6deg; /* rotateY on desktop hero */ /* ---- spacing (4px scale) ---- */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-8:3rem; --sp-10:4rem; --gap: var(--sp-4); --content-max: 1220px; /* ---- shape / depth ---- */ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-hover: 0 6px 16px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35); --surface-blur: 8px; /* ---- motion ---- */ --dur: 200ms; --dur-slow: 420ms; --ease: cubic-bezier(.2,.6,.3,1); --tap: 44px; /* ---- landscape / characters ---- */ --parallax: 1; /* 0 disables hero parallax */ --char-scale: 3; /* pixel-sprite magnification */ --char-speed: 1; /* walk-cycle multiplier (higher = slower) */ --glow: .8; /* accent glow intensity 0..1 */ --card-pad: var(--sp-5); /* card density */ } /* ---- LIGHT THEME (token overrides only) ---- */ :root[data-theme="light"] { --bg: #ffffff; --bg2: #f4f6f5; --surface: rgba(255,255,255,.9); --panel: rgba(255,255,255,.97); --line: rgba(28,33,38,.16); --line2: rgba(28,33,38,.08); --text: #1c2126; --muted: #454e57; --subtle: #5d6670; --accent: #0d6b5e; --accent-ink: #0d6b5e; --accent-2: #0f7d6d; --violet: #5748a8; --blue: #0f6c9e; --warm: #a05c14; --ok: #1b6b3a; --warn: #a05c14; --danger: #b3261e; --focus: #0d6b5e; --title-metal: linear-gradient(166deg, #333b45 10%, #566069 48%, #7f8994 88%); --title-grid: rgba(28,33,38,.15); --title-shadow: drop-shadow(6px 8px 0 rgba(28,33,38,.16)); --shadow: 0 1px 2px rgba(16,24,32,.06), 0 2px 8px rgba(16,24,32,.08); --shadow-hover: 0 6px 16px rgba(16,24,32,.10), 0 12px 28px rgba(16,24,32,.08); } /* ============================================================================ INACTIVE ALTERNATIVE PRESETS (see DESIGN.md — activate via data-preset) ============================================================================ */ /* 1 · LUNAR GRAPHITE — dark, mineral, metallic, restrained (no color accents) */ :root[data-preset="lunar-graphite"] { --bg:#0c0d10; --bg2:#101216; --surface:rgba(20,22,26,.8); --panel:rgba(16,18,22,.94); --line:rgba(226,229,233,.14); --line2:rgba(226,229,233,.07); --text:#e6e8ec; --muted:#a6abb3; --subtle:#868c95; --accent:#c9ced6; --accent-ink:#cfd4dc; --accent-2:#aeb5bf; --violet:#b7bcc6; --blue:#9aa6b6; --warm:#c8b79c; --ok:#a7d3b6; --focus:#cfd4dc; --title-metal:linear-gradient(166deg,#eef0f3 8%,#aab0b9 50%,#5c636c 90%); --glow:.4; } :root[data-preset="lunar-graphite"][data-theme="light"] { --bg:#e9e9e6; --bg2:#e2e2de; --surface:rgba(250,250,248,.85); --panel:rgba(250,250,248,.95); --line:rgba(30,32,36,.16); --line2:rgba(30,32,36,.08); --text:#1e2024; --muted:#4b515a; --subtle:#5e646d; --accent:#3a4048; --accent-ink:#3a4048; --violet:#4a505a; --blue:#3e4a58; --focus:#3a4048; --title-metal:linear-gradient(166deg,#33373d 8%,#565c64 50%,#818892 90%); } /* 2 · POLAR EDITORIAL — lighter, spacious, typography-led (light-first) */ :root[data-preset="polar-editorial"] { --bg:#12141a; --surface:rgba(22,25,32,.8); --text:#eef0f4; --muted:#b0b7c2; --accent:#8b7fd4; --accent-ink:#a99ff0; --violet:#a99ff0; --blue:#8fb8ef; --font-display:"Fraunces","Space Grotesk",serif; --content-max:1120px; --card-pad:var(--sp-6); --radius:14px; --glow:.5; --title-metal:linear-gradient(166deg,#f2f4f7 12%,#c3ccd6 52%,#7d8794 90%); } :root[data-preset="polar-editorial"][data-theme="light"] { --bg:#f4f2ec; --bg2:#eeece5; --surface:rgba(255,255,255,.78); --panel:rgba(255,255,255,.92); --line:rgba(28,33,38,.16); --line2:rgba(28,33,38,.08); --text:#1c2126; --muted:#4d565f; --subtle:#5d6670; --accent:#5748a8; --accent-ink:#5748a8; --violet:#5748a8; --blue:#0f6c9e; --focus:#5748a8; --title-metal:linear-gradient(166deg,#3a424c 12%,#59636e 52%,#838d99 90%); } /* 3 · DEEP SPACE STUDIO — darker, cinematic, atmospheric, minimal accents */ :root[data-preset="deep-space-studio"] { --bg:#06070c; --bg2:#090b12; --surface:rgba(12,14,22,.82); --panel:rgba(9,11,18,.95); --line:rgba(224,228,236,.12); --line2:rgba(224,228,236,.06); --text:#e4e8f0; --muted:#98a2b4; --subtle:#79839a; --accent:#5cc8e0; --accent-ink:#5cc8e0; --accent-2:#3fa9c4; --violet:#8f9bd6; --blue:#6ea8e0; --warm:#d0a06a; --ok:#6fd0a4; --focus:#5cc8e0; --shadow:0 1px 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.45); --glow:.65; --title-metal:linear-gradient(166deg,#e8ecf3 8%,#a7b0bd 50%,#586470 90%); }