/* ============================================================ Elcano public site — design tokens ============================================================ Source of truth for every color, glow, shadow, and motion value on the public site (index.html + any page that adopts the same shell). Edit values here to restyle; components in site.css only ever reference these variables. Theming: dark is the default (`:root`); light mode is the override, activated by `data-theme="light"` on (set by /theme.js from localStorage or system preference). Token names match the design file 1:1. ============================================================ */ /* ===== Dark (default) ===== */ :root { color-scheme: dark; --bg: #1A0B1E; --surface: #241B31; --surface-elevated: #2F2741; --border: rgba(255, 255, 255, 0.10); --border-soft: rgba(255, 255, 255, 0.10); --text-strong: #F4F5F9; --text-body: #CBC7DA; --text-secondary: #9C96AE; --accent: #9DA7EF; --accent-strong: #5956D5; --accent-strong-hover: #6C69E0; --link: #9DA7EF; --logo: #9DA7EF; --divider: #3A3147; --placeholder-bg: #241B31; --placeholder-border: #3A3147; --on-accent: #FFFFFF; --nav-bg-top: rgba(26, 11, 30, 0); --nav-bg-solid: rgba(26, 11, 30, 0.55); --glow-1: rgba(157, 167, 239, 0.16); --glow-2: rgba(89, 86, 213, 0.10); --glow-fade: rgba(26, 11, 30, 0); --toggle-bg: rgba(255, 255, 255, 0.06); --toggle-border: rgba(255, 255, 255, 0.14); --surface-alt: #241B31; --dot-grid: rgba(255, 255, 255, 0.06); --frame-line: rgba(255, 255, 255, 0.07); --dot: rgba(255, 255, 255, 0.18); --icon-tile: rgba(157, 167, 239, 0.14); --chip-feature-bg: rgba(89, 86, 213, 0.20); --chip-feature-border: rgba(157, 167, 239, 0.40); --chip-border: rgba(255, 255, 255, 0.14); --status-ok: #4ECB8F; --status-deny: #E08AA3; --status-warn: #E0A94A; --logo-mono: #9CA3AF; --accent-2: #B9C0F2; --rail-track: rgba(255, 255, 255, 0.14); --sweep-edge: rgba(157, 167, 239, 0.22); --sweep-core: rgba(157, 167, 239, 0.5); --chip-bg: rgba(255, 255, 255, 0.06); --meter-track: rgba(255, 255, 255, 0.10); --warn-bg: rgba(224, 169, 74, 0.12); --warn-border: rgba(224, 169, 74, 0.32); --warn-text: #E0A94A; --ok-bg: rgba(78, 203, 143, 0.12); --ok-border: rgba(78, 203, 143, 0.30); --spec-tag: #9DA7EF; --pkg-base: #241B31; --pkg-tint-1: rgba(89, 86, 213, 0.16); --pkg-tint-2: rgba(89, 86, 213, 0.06); --pkg-ring: rgba(157, 167, 239, 0.08); --pkg-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.55); --pkg-add-tile: rgba(89, 86, 213, 0.24); --rail-bg: rgba(0, 0, 0, 0.16); --glow-glimpse: rgba(89, 86, 213, 0.09); /* type + motion */ --font-body: "General Sans", "Inter", system-ui, sans-serif; --font-display: "Manrope", system-ui, sans-serif; --font-mono: "JetBrains Mono", monospace; --speed-fast: 0.15s; --speed-base: 0.18s; --speed-nav: 0.35s; --speed-reveal: 0.7s; --ease-reveal: cubic-bezier(0.2, 0.6, 0.2, 1); } /* ===== Light override ===== */ :root[data-theme="light"] { color-scheme: light; --bg: #FCFCFD; --surface: #FCFCFD; --surface-elevated: #FFFFFF; --border: #D4D7E2; --border-soft: #E6E4EC; --text-strong: #1A0B1E; --text-body: #33415F; --text-secondary: #586F7C; --accent: #5956D5; --accent-strong: #6262A0; --accent-strong-hover: #56568F; --link: #69689A; --logo: #7272AB; --divider: #D9DEEC; --placeholder-bg: #F7F8FB; --placeholder-border: #C2C7D6; --on-accent: #FFFFFF; --nav-bg-top: rgba(252, 252, 253, 0); --nav-bg-solid: rgba(252, 252, 253, 0.55); --glow-1: rgba(89, 86, 213, 0.13); --glow-2: rgba(157, 167, 239, 0.08); --glow-fade: rgba(252, 252, 253, 0); --toggle-bg: rgba(26, 11, 30, 0.04); --toggle-border: #D4D7E2; --surface-alt: #F4F5F9; --dot-grid: #1A0B1E12; --frame-line: #F0EFF5; --dot: #E6E4EC; --icon-tile: #EEF0FB; --chip-feature-bg: #EAEDF5; --chip-feature-border: #C7CBEC; --chip-border: #D7D5E6; --status-ok: #1F8A5B; --status-deny: #B26079; --status-warn: #C98A2B; --logo-mono: #6B7280; --accent-2: #9DA7EF; --rail-track: #E4E5EE; --sweep-edge: #9DA7EF; --sweep-core: #5956D5; --chip-bg: #F1F2F8; --meter-track: #EDEEF4; --warn-bg: #FCF5E8; --warn-border: #F0DEBE; --warn-text: #9A6B16; --ok-bg: #F0F9F4; --ok-border: #CFE8DA; --spec-tag: #6F6DA1; --pkg-base: #FFFFFF; --pkg-tint-1: rgba(157, 167, 239, 0.08); --pkg-tint-2: rgba(157, 167, 239, 0.03); --pkg-ring: rgba(89, 86, 213, 0.07); --pkg-shadow: 0 24px 60px -22px rgba(36, 27, 49, 0.20); --pkg-add-tile: rgba(89, 86, 213, 0.10); --rail-bg: #FAFAFD; }