/* ============================================================ MODARA — THEME LAYER Distinct visual identities, each a token override of the warm default in tokens.css. The default (:root, no [data-theme]) stays "Warm / Plum". Switch by setting data-theme on . Rule that holds across every theme: the ACCENT (the --plum-* ramp — kept under that name so components don't change) must never collide with the status hues ok=green · warn=amber · alert=red · info=blue. So accents live in the violet→indigo band, and the neutrals carry most of the distinctiveness. ============================================================ */ /* ============================================================ GRAPHITE — cool slate neutrals + a calm iris/violet accent. Reads like a precision instrument / research console. The opposite temperature from the warm "Claude" cream. ============================================================ */ html[data-theme="graphite"] { --paper: oklch(0.977 0.004 262); --surface: oklch(0.993 0.003 262); --surface-2: oklch(0.956 0.005 262); --surface-3: oklch(0.933 0.007 264); --titlebar: oklch(0.943 0.006 264); /* graph stage — deeper cool slate, distinct from app chrome */ --graph-bg: oklch(0.904 0.010 266); --graph-grid: oklch(0.846 0.012 266); --graph-edge: oklch(0.812 0.012 266); --graph-vignette: oklch(0.40 0.03 270 / 0.12); --border-soft: oklch(0.902 0.008 264); --border: oklch(0.856 0.010 264); --border-strong:oklch(0.772 0.012 266); --faint: oklch(0.612 0.013 266); --muted: oklch(0.492 0.014 268); --text: oklch(0.352 0.015 270); --heading: oklch(0.252 0.016 272); --ink: oklch(0.182 0.017 274); /* accent — iris / violet (hue ~300), well clear of info-blue */ --plum-50: oklch(0.962 0.022 300); --plum-100: oklch(0.922 0.040 300); --plum-200: oklch(0.856 0.066 300); --plum-300: oklch(0.752 0.092 300); --plum-400: oklch(0.595 0.122 300); --plum: oklch(0.470 0.130 300); --plum-600: oklch(0.415 0.124 300); --plum-700: oklch(0.352 0.106 300); --plum-on: oklch(0.978 0.012 300); /* cool-tinted elevation */ --shadow-xs: 0 1px 1.5px oklch(0.40 0.02 270 / 0.06); --shadow-sm: 0 1px 2px oklch(0.40 0.02 270 / 0.07), 0 1px 1px oklch(0.40 0.02 270 / 0.05); --shadow-md: 0 2px 4px oklch(0.40 0.02 270 / 0.07), 0 4px 12px oklch(0.40 0.02 270 / 0.08); --shadow-lg: 0 4px 10px oklch(0.40 0.02 270 / 0.08), 0 12px 32px oklch(0.38 0.02 270 / 0.12); --shadow-pop: 0 8px 20px oklch(0.36 0.02 270 / 0.12), 0 24px 60px oklch(0.34 0.02 270 / 0.18); } /* ============================================================ INK — high-contrast bone paper, near-black ink, a vivid electric indigo accent. Sharp, modern, editorial-tech. Crisp where the warm theme is cozy. ============================================================ */ html[data-theme="ink"] { --paper: oklch(0.984 0.0025 245); --surface: oklch(0.999 0.001 245); --surface-2: oklch(0.956 0.004 245); --surface-3: oklch(0.930 0.006 245); --titlebar: oklch(0.948 0.005 246); /* graph stage — cool, crisp, clearly inset from the bone paper */ --graph-bg: oklch(0.910 0.006 246); --graph-grid: oklch(0.846 0.008 248); --graph-edge: oklch(0.806 0.009 250); --graph-vignette: oklch(0.30 0.02 256 / 0.13); --border-soft: oklch(0.895 0.006 246); --border: oklch(0.832 0.008 248); --border-strong:oklch(0.710 0.011 250); --faint: oklch(0.556 0.013 252); --muted: oklch(0.426 0.014 254); --text: oklch(0.292 0.014 256); --heading: oklch(0.182 0.015 258); --ink: oklch(0.118 0.015 260); /* accent — electric indigo (hue ~285), high chroma for snap */ --plum-50: oklch(0.958 0.028 286); --plum-100: oklch(0.914 0.052 286); --plum-200: oklch(0.844 0.090 286); --plum-300: oklch(0.728 0.140 286); --plum-400: oklch(0.558 0.180 286); --plum: oklch(0.452 0.190 286); --plum-600: oklch(0.398 0.182 286); --plum-700: oklch(0.338 0.158 286); --plum-on: oklch(0.986 0.010 286); /* crisper, cooler elevation */ --shadow-xs: 0 1px 1.5px oklch(0.30 0.02 258 / 0.07); --shadow-sm: 0 1px 2px oklch(0.30 0.02 258 / 0.08), 0 1px 1px oklch(0.30 0.02 258 / 0.06); --shadow-md: 0 2px 5px oklch(0.28 0.02 258 / 0.08), 0 5px 14px oklch(0.28 0.02 258 / 0.10); --shadow-lg: 0 5px 12px oklch(0.26 0.02 258 / 0.10), 0 14px 36px oklch(0.24 0.02 258 / 0.14); --shadow-pop: 0 10px 24px oklch(0.22 0.02 258 / 0.14), 0 28px 64px oklch(0.20 0.02 258 / 0.20); /* slightly tighter geometry reinforces the sharper character */ --r-md: 7px; --r-lg: 9px; --r-xl: 13px; }