/* ═══════════════════════════════════════════════════════════════ InSightYou — DARK COLOR SCHEME (the default) ═══════════════════════════════════════════════════════════════ HOW THIS WORKS -------------- Every color used anywhere on the site is defined here as a CSS variable. The light scheme lives in theme-light.css and defines the exact same list of variables with light values. The element carries data-theme="dark" or data-theme="light" (set by the toggle button in the top bar, remembered in localStorage under the key "isy_theme"). TO CHANGE A COLOR: edit the value here (and its counterpart in theme-light.css). Never hardcode colors in style.css, main.css or the templates — they all reference these variables. NOTE ON -rgb VARIABLES: every color that is used with transparency also has an "-rgb" twin holding the raw "R,G,B" triplet. These are consumed as rgba(var(--x-rgb), 0.5). If you change a color, change BOTH the hex and its -rgb triplet so they stay in sync. ═══════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { /* ── Backgrounds & surfaces ─────────────────────────────── */ --bg: #04020a; /* page background (near-black) */ --bg-rgb: 4,2,10; --deep-night: #0d0818; /* cards, panels, nav surfaces */ --deep-night-rgb: 13,8,24; --deep-iris: #2e1458; /* nebula glow, image placeholders */ --deep-iris-rgb: 46,20,88; --iris-deep: #1a0a2e; /* darkest nebula tone */ --iris-mid: #1e0f37; /* mid gradient stops */ --iris-mid-rgb: 30,15,55; /* ── Brand purples ──────────────────────────────────────── */ --core-purple: #5a2a9e; /* primary brand purple (borders, buttons) */ --core-purple-rgb: 90,42,158; --purple-bright: #6b35b5; /* button hover gradient start */ --mid-amethyst: #8a50d8; /* secondary purple (gradients, accents) */ --mid-amethyst-rgb:138,80,216; --amethyst-bright: #9a60e8; /* button hover gradient end */ --soft-violet: #c090f0; /* accent text, links, highlights */ --soft-violet-rgb: 192,144,240; --violet-pale: #dcc3ff; /* brightest violet glints */ --violet-pale-rgb: 220,195,255; --dot: #3a1a6e; /* idle pager/pulse dots */ --orb-glint: #ffffff; /* highlight on the logo orb */ /* ── Text ───────────────────────────────────────────────── */ --moon-white: #e8e0f8; /* headings + primary text */ --moon-white-rgb: 232,224,248; --text: var(--moon-white); --muted: rgba(232,224,248,0.5); /* secondary text */ --muted2: rgba(232,224,248,0.25); /* faintest text */ --neutral: #777777; /* neutral gray text */ --ink-muted: #4a4060; /* muted ink on light surfaces */ /* ── Gold accents ───────────────────────────────────────── */ --gold: #c9a84c; /* labels, prices, CTA borders */ --gold-rgb: 201,168,76; --gold-warm: #b8860b; /* gold gradient dark end */ --gold-light: #e2c27d; /* bright gold (prices, hovers) */ --gold-shade-rgb: 30,25,5; /* dark gold-tinted backgrounds */ /* ── Borders, shadows, glass ────────────────────────────── */ --border: rgba(90,42,158,0.2); --border-light: rgba(90,42,158,0.1); --shadow: 0 20px 60px rgba(0,0,0,0.5); --glow: 0 0 40px rgba(90,42,158,0.3); --glass-rgb: 255,255,255; /* subtle input/panel washes: rgba(glass, .03) */ --shade-rgb: 0,0,0; /* shadows & dark scrims */ /* ── Decorative sky ─────────────────────────────────────── */ --star: #ffffff; /* twinkling stars */ /* ── Status colors ──────────────────────────────────────── */ --error: #f08080; /* error text */ --error-rgb: 240,128,128; --error-deep: #c04040; /* error backgrounds/borders */ --error-deep-rgb: 180,40,40; --success: #4ade80; /* success text */ --success-rgb: 74,222,128; --success-deep-rgb:26,122,61; /* success backgrounds/borders */ --warn-rgb: 240,160,100; /* warning text */ --warn-deep-rgb: 180,100,40; /* warning backgrounds/borders */ --info-rgb: 100,180,240; /* info text */ --info-deep-rgb: 26,60,100; /* info backgrounds/borders */ /* ── Misc fixed tones ───────────────────────────────────── */ --on-accent: #ffffff; /* text on purple buttons */ --on-gold: #0d0818; /* text on gold buttons */ --paper: #f0ece4; /* warm paper tone (workbooks) */ --paper-rgb: 240,236,228; --tan: #b89a6f; /* warm tan accents */ }