/* ============================================================================ astrochart — themes ---------------------------------------------------------------------------- Three complete themes. Each is a full re-statement of every colour token plus the handful of structural tokens (shadow, aspect stroke pattern) that genuinely must adapt to the surface they sit on. Load AFTER tokens.css. Structural tokens (type, space, radius, motion, chart geometry) are NOT repeated — they are theme-invariant by design. Usage: (default — also the :root fallback) midnight — dark, sophisticated. The default. Celestial atlas at night. parchment — light, classical. Aged paper, copperplate engraving. monochrome — pure black & white, brutalist. Aspect TYPE is carried by stroke pattern, not colour (see --aspect-dash-* below). The three are intentionally one design lineage: same gold-leaf accent temperature, same terracotta/sage/teal element family (shifted in value, never in hue family), same restraint. A reader should recognise the chart as the same instrument in any theme. ============================================================================ */ /* ============================================================================ THEME — midnight (default) A celestial atlas seen by candlelight: near-black grounds, warm bone ink, a single thread of gold leaf. ============================================================================ */ :root, [data-theme="midnight"] { color-scheme: dark; /* Backgrounds */ --bg-deep: #0a0a0f; --bg-surface: #15151f; --bg-elevated: #1f1f2c; /* Ink */ --ink-primary: #f5f3f0; --ink-secondary: #a7a5a0; --ink-tertiary: #6b6a66; --ink-quaternary: #3d3c3a; /* Accent */ --accent-gold: #c9a86b; --accent-gold-soft: rgba(201, 168, 107, 0.25); /* Elements */ --fire: #d4634a; /* terracotta */ --earth: #7a8e5e; /* sage */ --air: #c9a86b; /* gold */ --water: #4a7a9c; /* deep teal */ /* Aspects */ --aspect-harmonious: #7a8e5e; --aspect-dynamic: #d4634a; --aspect-neutral: #f5f3f0; --aspect-minor: rgba(167, 165, 160, 0.5); --aspect-harmonic: rgba(201, 168, 107, 0.4); /* States */ --state-success: #7a8e5e; --state-warning: #c9a86b; --state-error: #d4634a; --state-info: #4a7a9c; /* Aspect stroke patterns — colour carries type; patterns add quiet texture */ --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; /* Shadow — soft, deep, the recession of a dark room */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.35); } /* ============================================================================ THEME — parchment A printed star chart on aged rag paper: warm cream grounds, sepia-brown ink, pigments deepened so terracotta / sage / teal hold their weight on light. The element hues are the SAME family as midnight — only their value drops, so the two themes read as one engraving house working in two inks. ============================================================================ */ [data-theme="parchment"] { color-scheme: light; /* Backgrounds */ --bg-deep: #f0ebe1; --bg-surface: #e8e1d3; --bg-elevated: #ffffff; /* Ink — warm sepia-brown, four steps */ --ink-primary: #2a2520; --ink-secondary: #5a5048; --ink-tertiary: #8a8078; --ink-quaternary: #b8b0a8; /* Accent — deepened gold so it reads as struck metal, not highlighter */ --accent-gold: #8b6f33; --accent-gold-soft: rgba(139, 111, 51, 0.18); /* Elements — same hue family as midnight, value lowered for light-ground contrast (each clears ~4.5:1 against --bg-deep) */ --fire: #b04e34; /* terracotta, deepened */ --earth: #5e7344; /* sage, deepened */ --air: #8b6f33; /* gold — tracks the accent */ --water: #3a6182; /* deep teal, deepened */ /* Aspects */ --aspect-harmonious: #5e7344; --aspect-dynamic: #b04e34; --aspect-neutral: #2a2520; /* conjunction = primary ink */ --aspect-minor: rgba(90, 80, 72, 0.5); --aspect-harmonic: rgba(139, 111, 51, 0.35); /* States */ --state-success: #5e7344; --state-warning: #8b6f33; --state-error: #b04e34; --state-info: #3a6182; /* Aspect stroke patterns — colour still carries type on parchment */ --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; /* Shadow — soft, warm-grey, the faint cast of paper on paper */ --shadow-sm: 0 1px 2px rgba(60, 50, 40, 0.10); --shadow-md: 0 4px 12px rgba(60, 50, 40, 0.13); --shadow-lg: 0 12px 36px rgba(60, 50, 40, 0.18); } /* ============================================================================ THEME — monochrome Pure black & white, brutalist. A declassified blueprint. No hue anywhere. Element colours collapse to a four-step grey ramp. Aspect TYPE is no longer carried by colour — it is carried by STROKE PATTERN (--aspect-dash-*). Render code must read those tokens for this theme to remain legible; colour alone will not disambiguate. States also collapse to greys: severity reads as darkness (error darkest → success lightest) and must be reinforced with a label or glyph in the UI. ============================================================================ */ [data-theme="monochrome"] { color-scheme: light; /* Backgrounds */ --bg-deep: #ffffff; --bg-surface: #f4f4f4; --bg-elevated: #ffffff; /* Ink — true black through to a faint rule grey */ --ink-primary: #000000; --ink-secondary: #333333; --ink-tertiary: #767676; --ink-quaternary: #b8b8b8; /* Accent — no gold; the accent is pure black, distinguished by weight */ --accent-gold: #000000; --accent-gold-soft: rgba(0, 0, 0, 0.08); /* Elements — four-step grey ramp, fire darkest → water lightest */ --fire: #111111; --earth: #555555; --air: #888888; --water: #aaaaaa; /* Aspects — colour is uniform; the stroke pattern below does the work. Minor/harmonic keep a lighter ink so faint lines stay faint. */ --aspect-harmonious: #000000; --aspect-dynamic: #000000; --aspect-neutral: #000000; --aspect-minor: #767676; --aspect-harmonic: #333333; /* States — grey ramp; severity = darkness. Reinforce with label/icon. */ --state-success: #808080; --state-warning: #4d4d4d; --state-error: #000000; --state-info: #5a5a5a; /* Aspect stroke patterns — THE differentiator in this theme: harmonious solid (trine, sextile) dynamic long dash (square, opposition) neutral solid (conjunction — render draws it bold) minor fine dot (semi-sextile, quincunx, etc.) harmonic dash-dot (quintile, septile family) */ --aspect-dash-harmonious: none; --aspect-dash-dynamic: 9 5; --aspect-dash-neutral: none; --aspect-dash-minor: 1 5; --aspect-dash-harmonic: 8 4 1 4; /* Shadow — hard-edged, zero-blur offset blocks. Brutalist, never glassy. */ --shadow-sm: 1px 1px 0 #000000; --shadow-md: 3px 3px 0 #000000; --shadow-lg: 6px 6px 0 #000000; } /* ============================================================================ THEME — nebula A chart adrift in deep space: an indigo-violet ground, a starlight-gold thread, and a soft nebula bloom behind the wheel. Same element family as midnight — water lifts a shade bluer to catch the cosmic light. ============================================================================ */ [data-theme="nebula"] { color-scheme: dark; --bg-deep: #0c0a18; --bg-surface: #161329; --bg-elevated: #221b3a; --ink-primary: #ece9f6; --ink-secondary: #a3a0b8; --ink-tertiary: #6c6885; --ink-quaternary: #3c3854; --accent-gold: #d6c08a; --accent-gold-soft: rgba(214, 192, 138, 0.25); --fire: #d4634a; --earth: #7a8e5e; --air: #d6c08a; --water: #5b86c4; --aspect-harmonious: #7a8e5e; --aspect-dynamic: #d4634a; --aspect-neutral: #ece9f6; --aspect-minor: rgba(163, 160, 184, 0.5); --aspect-harmonic: rgba(214, 192, 138, 0.4); --state-success: #7a8e5e; --state-warning: #d6c08a; --state-error: #d4634a; --state-info: #5b86c4; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5); } /* ============================================================================ THEME — noir (v2 INSTRUMENT — cinematic editorial, crimson razor accent) ============================================================================ */ [data-theme="noir"] { color-scheme: dark; --bg-deep: #060606; --bg-surface: #0f0f0f; --bg-elevated: #1a1a1a; --ink-primary: #f5f3f0; --ink-secondary: #a8a6a2; --ink-tertiary: #5e5c58; --ink-quaternary: #2a2826; --accent-gold: #d4453a; --accent-gold-soft: rgba(212, 69, 58, 0.22); --fire: #d4453a; --earth: #8a8a85; --air: #f5f3f0; --water: #5e5c58; --aspect-harmonious: #f5f3f0; --aspect-dynamic: #d4453a; --aspect-neutral: #5e5c58; --aspect-minor: rgba(168, 166, 162, 0.5); --aspect-harmonic: rgba(212, 69, 58, 0.4); --state-success: #8a8a85; --state-warning: #d4453a; --state-error: #d4453a; --state-info: #5e5c58; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55); --shadow-md: 0 5px 16px rgba(0, 0, 0, 0.65); --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.72); } /* ============================================================================ THEME — terracotta A warm clay-and-desert daylight: sandstone grounds, ochre ink, pigments fired a shade deeper than parchment. A sunlit cousin of the engraving house. ============================================================================ */ [data-theme="terracotta"] { color-scheme: light; --bg-deep: #ebe0cf; --bg-surface: #e1d3bb; --bg-elevated: #f7f1e4; --ink-primary: #33271b; --ink-secondary: #604f3d; --ink-tertiary: #8d7b64; --ink-quaternary: #bdac93; --accent-gold: #9a6a2c; --accent-gold-soft: rgba(154, 106, 44, 0.18); --fire: #ad4a30; --earth: #586e3f; --air: #9a6a2c; --water: #386079; --aspect-harmonious: #586e3f; --aspect-dynamic: #ad4a30; --aspect-neutral: #33271b; --aspect-minor: rgba(96, 79, 61, 0.5); --aspect-harmonic: rgba(154, 106, 44, 0.35); --state-success: #586e3f; --state-warning: #9a6a2c; --state-error: #ad4a30; --state-info: #386079; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 2px rgba(70, 50, 30, 0.12); --shadow-md: 0 4px 12px rgba(70, 50, 30, 0.15); --shadow-lg: 0 12px 36px rgba(70, 50, 30, 0.20); } /* ============================================================================ THEME — aurora A chart under polar light: a deep teal-green ground, a cool jade-mint thread in place of gold, and an aurora bloom drifting behind the wheel. Same element family as midnight — water lifts toward cyan to catch the glow. ============================================================================ */ [data-theme="aurora"] { color-scheme: dark; --bg-deep: #081411; --bg-surface: #0f1f1a; --bg-elevated: #192c25; --ink-primary: #eef3ef; --ink-secondary: #a0b0a8; --ink-tertiary: #647168; --ink-quaternary: #36403b; --accent-gold: #7fc9a6; --accent-gold-soft: rgba(127, 201, 166, 0.24); --fire: #d4634a; --earth: #7a8e5e; --air: #7fc9a6; --water: #4d9ca8; --aspect-harmonious: #7a8e5e; --aspect-dynamic: #d4634a; --aspect-neutral: #eef3ef; --aspect-minor: rgba(160, 176, 168, 0.5); --aspect-harmonic: rgba(127, 201, 166, 0.4); --state-success: #7a8e5e; --state-warning: #7fc9a6; --state-error: #d4634a; --state-info: #4d9ca8; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5); } /* ============================================================================ THEME — eclipse The chart at totality: a near-black ground with the faintest warmth, and a blood-moon red where gold would sit. The most dramatic, high-contrast dark. ============================================================================ */ [data-theme="eclipse"] { color-scheme: dark; --bg-deep: #0c0809; --bg-surface: #181011; --bg-elevated: #241819; --ink-primary: #f2ece9; --ink-secondary: #aba29f; --ink-tertiary: #6e6562; --ink-quaternary: #3f3835; --accent-gold: #bf4d57; --accent-gold-soft: rgba(191, 77, 87, 0.26); --fire: #d4634a; --earth: #7a8e5e; --air: #bf4d57; --water: #4a7a9c; --aspect-harmonious: #7a8e5e; --aspect-dynamic: #d4634a; --aspect-neutral: #f2ece9; --aspect-minor: rgba(171, 162, 159, 0.5); --aspect-harmonic: rgba(191, 77, 87, 0.4); --state-success: #7a8e5e; --state-warning: #bf4d57; --state-error: #d4634a; --state-info: #4a7a9c; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 5px 16px rgba(0, 0, 0, 0.6); --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.65); } /* ============================================================================ THEME — moonstone A printed star chart in cool daylight: pale blue-grey grounds, slate ink, a steel-blue accent. The cool counterpart to warm parchment and terracotta. ============================================================================ */ [data-theme="moonstone"] { color-scheme: light; --bg-deep: #e7eaef; --bg-surface: #dbdfe7; --bg-elevated: #f5f7fa; --ink-primary: #1f2630; --ink-secondary: #4a5360; --ink-tertiary: #7c8590; --ink-quaternary: #aeb6c1; --accent-gold: #3f6285; --accent-gold-soft: rgba(63, 98, 133, 0.16); --fire: #b04e34; --earth: #5e7344; --air: #3f6285; --water: #2f6f78; --aspect-harmonious: #5e7344; --aspect-dynamic: #b04e34; --aspect-neutral: #1f2630; --aspect-minor: rgba(74, 83, 96, 0.5); --aspect-harmonic: rgba(63, 98, 133, 0.34); --state-success: #5e7344; --state-warning: #3f6285; --state-error: #b04e34; --state-info: #2f6f78; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 2px rgba(40, 50, 65, 0.10); --shadow-md: 0 4px 12px rgba(40, 50, 65, 0.13); --shadow-lg: 0 12px 36px rgba(40, 50, 65, 0.18); } /* ============================================================================ THEME — ember The chart by firelight: a warm brown-black ground, a copper-amber thread, and an ember glow rising from below. Midnight's hearthside cousin. ============================================================================ */ [data-theme="ember"] { color-scheme: dark; --bg-deep: #120d09; --bg-surface: #1f1610; --bg-elevated: #2b2018; --ink-primary: #f4ece2; --ink-secondary: #b3a795; --ink-tertiary: #756a5c; --ink-quaternary: #423a30; --accent-gold: #d98f4a; --accent-gold-soft: rgba(217, 143, 74, 0.24); --fire: #d4634a; --earth: #7a8e5e; --air: #d98f4a; --water: #4a7a9c; --aspect-harmonious: #7a8e5e; --aspect-dynamic: #d4634a; --aspect-neutral: #f4ece2; --aspect-minor: rgba(179, 167, 149, 0.5); --aspect-harmonic: rgba(217, 143, 74, 0.4); --state-success: #7a8e5e; --state-warning: #d98f4a; --state-error: #d4634a; --state-info: #4a7a9c; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5); } /* ============================================================================ THEME — dawn A star chart at sunrise: a soft blush-pink ground, warm ink, and a mauve-rose accent. The gentle, warm-light counterpart to moonstone. ============================================================================ */ [data-theme="dawn"] { color-scheme: light; --bg-deep: #f3e6e2; --bg-surface: #ecdcd6; --bg-elevated: #fdf6f3; --ink-primary: #2e2622; --ink-secondary: #5e514a; --ink-tertiary: #8d7f76; --ink-quaternary: #c2b3aa; --accent-gold: #a8546c; --accent-gold-soft: rgba(168, 84, 108, 0.18); --fire: #b04e34; --earth: #5e7344; --air: #a8546c; --water: #3a6182; --aspect-harmonious: #5e7344; --aspect-dynamic: #b04e34; --aspect-neutral: #2e2622; --aspect-minor: rgba(94, 81, 74, 0.5); --aspect-harmonic: rgba(168, 84, 108, 0.34); --state-success: #5e7344; --state-warning: #a8546c; --state-error: #b04e34; --state-info: #3a6182; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 2px rgba(70, 45, 40, 0.11); --shadow-md: 0 4px 12px rgba(70, 45, 40, 0.14); --shadow-lg: 0 12px 36px rgba(70, 45, 40, 0.19); } /* ============================================================================ THEME — lazuli Yves Klein blue. Total ultramarine immersion: the ground is deep IKB, not near-black, and the accent stays gold — the historic Klein pairing (his Monogold leaf works against the blue). ============================================================================ */ [data-theme="lazuli"] { color-scheme: dark; --bg-deep: #001952; --bg-surface: #0a2470; --bg-elevated: #15348e; --ink-primary: #eef0fb; --ink-secondary: #a6b0db; --ink-tertiary: #6b76ac; --ink-quaternary: #3a4480; --accent-gold: #e8c87d; --accent-gold-soft: rgba(232, 200, 125, 0.26); --fire: #e6755c; --earth: #8fae6e; --air: #e8c87d; --water: #5fa6e6; --aspect-harmonious: #8fae6e; --aspect-dynamic: #e6755c; --aspect-neutral: #eef0fb; --aspect-minor: rgba(166, 176, 219, 0.5); --aspect-harmonic: rgba(232, 200, 125, 0.4); --state-success: #8fae6e; --state-warning: #e8c87d; --state-error: #e6755c; --state-info: #5fa6e6; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 3px rgba(0, 5, 35, 0.5); --shadow-md: 0 5px 16px rgba(0, 5, 35, 0.55); --shadow-lg: 0 16px 44px rgba(0, 5, 35, 0.62); } /* ============================================================================ THEME — tyrian (v2 INSTRUMENT — imperial purple + rich gilt) ============================================================================ */ [data-theme="tyrian"] { color-scheme: dark; --bg-deep: #100a18; --bg-surface: #1f1530; --bg-elevated: #2e2048; --ink-primary: #f0eaf5; --ink-secondary: #ab98c0; --ink-tertiary: #6e5a80; --ink-quaternary: #3a2a4a; --accent-gold: #d4a85a; --accent-gold-soft: rgba(212, 168, 90, 0.24); --fire: #c46878; --earth: #8a8068; --air: #d4a85a; --water: #7a5cd4; --aspect-harmonious: #d4a85a; --aspect-dynamic: #c46878; --aspect-neutral: #6e5a80; --aspect-minor: rgba(171, 152, 192, 0.5); --aspect-harmonic: rgba(212, 168, 90, 0.4); --state-success: #8a8068; --state-warning: #d4a85a; --state-error: #c46878; --state-info: #7a5cd4; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 3px rgba(8, 0, 14, 0.55); --shadow-md: 0 5px 16px rgba(8, 0, 14, 0.62); --shadow-lg: 0 16px 44px rgba(8, 0, 14, 0.7); } /* ============================================================================ THEME — obsidian (v2 INSTRUMENT — glassy black with peacock teal) ============================================================================ */ [data-theme="obsidian"] { color-scheme: dark; --bg-deep: #050709; --bg-surface: #0c1014; --bg-elevated: #161e23; --ink-primary: #e8eef0; --ink-secondary: #889098; --ink-tertiary: #485058; --ink-quaternary: #1c2228; --accent-gold: #1e9b8a; --accent-gold-soft: rgba(30, 155, 138, 0.24); --fire: #c54848; --earth: #6e7e58; --air: #c4c4a8; --water: #1e9b8a; --aspect-harmonious: #1e9b8a; --aspect-dynamic: #c54848; --aspect-neutral: #485058; --aspect-minor: rgba(136, 144, 152, 0.5); --aspect-harmonic: rgba(30, 155, 138, 0.4); --state-success: #1e9b8a; --state-warning: #c4c4a8; --state-error: #c54848; --state-info: #1e9b8a; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 3px rgba(0, 4, 8, 0.55); --shadow-md: 0 5px 16px rgba(0, 4, 8, 0.62); --shadow-lg: 0 16px 44px rgba(0, 4, 8, 0.7); } /* ============================================================================ THEME — porcelain (v2 INSTRUMENT — light. warm bone, sepia ink, brass) ============================================================================ */ [data-theme="porcelain"] { color-scheme: light; --bg-deep: #f5efe2; --bg-surface: #ffffff; --bg-elevated: #ebe2cf; --ink-primary: #1c1611; --ink-secondary: #5a4e3a; --ink-tertiary: #8a7d6a; --ink-quaternary: rgba(28, 22, 17, 0.18); --accent-gold: #a87338; --accent-gold-soft: rgba(168, 115, 56, 0.16); --fire: #b8482e; --earth: #6e7838; --air: #a87338; --water: #2a5078; --aspect-harmonious: #6e7838; --aspect-dynamic: #b8482e; --aspect-neutral: #8a7d6a; --aspect-minor: rgba(90, 78, 58, 0.45); --aspect-harmonic: rgba(168, 115, 56, 0.34); --state-success: #6e7838; --state-warning: #a87338; --state-error: #b8482e; --state-info: #2a5078; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 2px rgba(50, 38, 26, 0.10); --shadow-md: 0 4px 12px rgba(50, 38, 26, 0.13); --shadow-lg: 0 12px 36px rgba(50, 38, 26, 0.18); } /* ============================================================================ THEME — oxide (v2 INSTRUMENT — oxidised copper, patina + rust) ============================================================================ */ [data-theme="oxide"] { color-scheme: dark; --bg-deep: #0a1410; --bg-surface: #102018; --bg-elevated: #1a2e22; --ink-primary: #e0eed8; --ink-secondary: #8aa498; --ink-tertiary: #506858; --ink-quaternary: #1f3028; --accent-gold: #d47840; --accent-gold-soft: rgba(212, 120, 64, 0.24); --fire: #d47840; --earth: #4ea088; --air: #c8b048; --water: #487a8a; --aspect-harmonious: #4ea088; --aspect-dynamic: #d47840; --aspect-neutral: #506858; --aspect-minor: rgba(138, 164, 152, 0.5); --aspect-harmonic: rgba(212, 120, 64, 0.4); --state-success: #4ea088; --state-warning: #c8b048; --state-error: #d47840; --state-info: #487a8a; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 3px rgba(0, 12, 8, 0.5); --shadow-md: 0 5px 16px rgba(0, 12, 8, 0.58); --shadow-lg: 0 16px 44px rgba(0, 12, 8, 0.66); } /* ============================================================================ THEME — twilight (v2 INSTRUMENT — deep indigo + magenta + amber dusk) ============================================================================ */ [data-theme="twilight"] { color-scheme: dark; --bg-deep: #0a0820; --bg-surface: #14102e; --bg-elevated: #1f1a3e; --ink-primary: #ece8f8; --ink-secondary: #9a94c0; --ink-tertiary: #5a5680; --ink-quaternary: #2a2848; --accent-gold: #e8a058; --accent-gold-soft: rgba(232, 160, 88, 0.24); --fire: #e85878; --earth: #8a8458; --air: #e8a058; --water: #5878d4; --aspect-harmonious: #e8a058; --aspect-dynamic: #e85878; --aspect-neutral: #5a5680; --aspect-minor: rgba(154, 148, 192, 0.5); --aspect-harmonic: rgba(232, 160, 88, 0.4); --state-success: #8a8458; --state-warning: #e8a058; --state-error: #e85878; --state-info: #5878d4; --aspect-dash-harmonious: none; --aspect-dash-dynamic: none; --aspect-dash-neutral: none; --aspect-dash-minor: 2 4; --aspect-dash-harmonic: 7 5; --shadow-sm: 0 1px 3px rgba(0, 0, 24, 0.55); --shadow-md: 0 5px 16px rgba(0, 0, 24, 0.62); --shadow-lg: 0 16px 44px rgba(0, 0, 24, 0.7); } /* ============================================================================ TEXTURES Each theme carries a surface treatment, not just a palette: a shared fine-grain tile plus per-theme atmospheric washes (a nebula bloom, a noir vignette, a paper fibre). Applied to , so the chart sits on a surface rather than a flat fill. ============================================================================ */ :root { --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E"); } [data-theme="midnight"] body { background-color: #0a0a0f; background-image: radial-gradient(ellipse 80% 52% at 50% 0%, rgba(201, 168, 107, 0.05), transparent 70%), var(--tex-grain); background-repeat: no-repeat, repeat; background-size: auto, 160px 160px; background-blend-mode: normal, soft-light; } [data-theme="nebula"] body { background-color: #0c0a18; background-image: radial-gradient(ellipse 62% 48% at 16% 10%, rgba(124, 92, 198, 0.26), transparent 70%), radial-gradient(ellipse 58% 46% at 86% 90%, rgba(58, 110, 190, 0.20), transparent 72%), var(--tex-grain); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 160px 160px; background-blend-mode: normal, normal, soft-light; } [data-theme="noir"] body { background-color: #060606; background-image: radial-gradient(ellipse 82% 70% at 50% 40%, transparent 44%, rgba(0, 0, 0, 0.72) 100%), var(--tex-grain); background-repeat: no-repeat, repeat; background-size: auto, 130px 130px; background-blend-mode: normal, soft-light; } [data-theme="obsidian"] body { background-color: #050709; background-image: radial-gradient(ellipse 62% 48% at 18% 8%, rgba(30, 155, 138, 0.16), transparent 70%), radial-gradient(ellipse 58% 46% at 86% 92%, rgba(30, 155, 138, 0.10), transparent 74%), var(--tex-grain); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 160px 160px; background-blend-mode: normal, normal, soft-light; } [data-theme="porcelain"] body { background-color: #f5efe2; background-image: radial-gradient(ellipse 80% 56% at 50% 0%, rgba(168, 115, 56, 0.08), transparent 70%), var(--tex-grain); background-repeat: no-repeat, repeat; background-size: auto, 150px 150px; background-blend-mode: normal, multiply; } [data-theme="oxide"] body { background-color: #0a1410; background-image: radial-gradient(ellipse 66% 48% at 18% 8%, rgba(212, 120, 64, 0.14), transparent 70%), radial-gradient(ellipse 60% 46% at 84% 96%, rgba(78, 160, 136, 0.12), transparent 74%), var(--tex-grain); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 160px 160px; background-blend-mode: normal, normal, soft-light; } [data-theme="twilight"] body { background-color: #0a0820; background-image: radial-gradient(ellipse 70% 50% at 18% 6%, rgba(232, 88, 120, 0.18), transparent 70%), radial-gradient(ellipse 64% 50% at 84% 94%, rgba(88, 120, 212, 0.18), transparent 72%), var(--tex-grain); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 160px 160px; background-blend-mode: normal, normal, soft-light; } [data-theme="parchment"] body { background-color: #f0ebe1; background-image: radial-gradient(ellipse 82% 58% at 50% 0%, rgba(139, 111, 51, 0.07), transparent 70%), var(--tex-grain); background-repeat: no-repeat, repeat; background-size: auto, 150px 150px; background-blend-mode: normal, multiply; } [data-theme="terracotta"] body { background-color: #ebe0cf; background-image: radial-gradient(ellipse 76% 54% at 50% 6%, rgba(154, 106, 44, 0.11), transparent 72%), var(--tex-grain); background-repeat: no-repeat, repeat; background-size: auto, 150px 150px; background-blend-mode: normal, multiply; } [data-theme="monochrome"] body { background-color: #ffffff; background-image: var(--tex-grain); background-repeat: repeat; background-size: 190px 190px; background-blend-mode: multiply; } [data-theme="aurora"] body { background-color: #081411; background-image: radial-gradient(ellipse 64% 44% at 22% 8%, rgba(86, 196, 150, 0.22), transparent 72%), radial-gradient(ellipse 56% 42% at 84% 92%, rgba(58, 142, 158, 0.18), transparent 74%), var(--tex-grain); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 160px 160px; background-blend-mode: normal, normal, soft-light; } [data-theme="eclipse"] body { background-color: #0c0809; background-image: radial-gradient(ellipse 60% 44% at 50% 4%, rgba(191, 77, 87, 0.16), transparent 66%), radial-gradient(ellipse 80% 74% at 50% 42%, transparent 44%, rgba(0, 0, 0, 0.62) 100%), var(--tex-grain); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 140px 140px; background-blend-mode: normal, normal, soft-light; } [data-theme="moonstone"] body { background-color: #e7eaef; background-image: radial-gradient(ellipse 80% 56% at 50% 0%, rgba(63, 98, 133, 0.08), transparent 72%), var(--tex-grain); background-repeat: no-repeat, repeat; background-size: auto, 150px 150px; background-blend-mode: normal, multiply; } [data-theme="ember"] body { background-color: #120d09; background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(217, 143, 74, 0.16), transparent 72%), var(--tex-grain); background-repeat: no-repeat, repeat; background-size: auto, 160px 160px; background-blend-mode: normal, soft-light; } [data-theme="dawn"] body { background-color: #f3e6e2; background-image: radial-gradient(ellipse 82% 58% at 50% 0%, rgba(168, 84, 108, 0.10), transparent 72%), var(--tex-grain); background-repeat: no-repeat, repeat; background-size: auto, 150px 150px; background-blend-mode: normal, multiply; } [data-theme="lazuli"] body { background-color: #001952; background-image: radial-gradient(ellipse 70% 52% at 50% 4%, rgba(38, 78, 220, 0.42), transparent 70%), radial-gradient(ellipse 60% 48% at 84% 96%, rgba(20, 52, 142, 0.40), transparent 74%), var(--tex-grain); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 160px 160px; background-blend-mode: normal, normal, soft-light; } [data-theme="tyrian"] body { /* base must equal --bg-deep (#100a18) so the sticky top chrome, which is filled with --bg-deep, blends into the page instead of showing a flat block of a different shade at the top. Every other theme already keeps these two in sync; tyrian was the lone mismatch. */ background-color: #100a18; background-image: radial-gradient(ellipse 66% 48% at 50% 2%, rgba(150, 18, 96, 0.34), transparent 70%), radial-gradient(ellipse 58% 46% at 88% 96%, rgba(92, 16, 70, 0.34), transparent 74%), var(--tex-grain); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, auto, 150px 150px; background-blend-mode: normal, normal, soft-light; }