/* === Light theme ("paper") — a complete inversion, not a tint pass === Applied with data-theme="light" (or the legacy alias data-theme="paper") on , or any subtree. Every semantic alias is redefined here, plus the few raw ramp steps and white-alpha utilities that components reach for directly, so no component needs a light-specific branch. Imported last so these overrides win over the :root defaults. */ [data-theme="light"],[data-theme="paper"]{ /* --- Raw ramp remaps: keep component internals honest --- */ --ink-500:#AEB4BB;--ink-600:#C7CCD2;--ink-700:#E3E5E8;--ink-750:#EDEFF1;--ink-800:#F3F4F0;--ink-850:#F9FAF4;--ink-900:#F6F7EE;--ink-1000:#ECEEE1; /* Alpha utilities flip from white-on-dark to ink-on-paper */ --w-a04:rgba(6,7,8,.035);--w-a06:rgba(6,7,8,.05);--w-a08:rgba(6,7,8,.065);--w-a10:rgba(6,7,8,.08);--w-a12:rgba(6,7,8,.10);--w-a14:rgba(6,7,8,.13);--w-a18:rgba(6,7,8,.16);--w-a24:rgba(6,7,8,.21);--w-a28:rgba(6,7,8,.26); /* Status hues darken so they carry on paper (400 is the on-surface rank) */ --flare-400:#D63A06;--signal-400:#0E8B54;--azure-400:#255FCC;--amber-400:#8C6006;--rose-400:#C81438; /* --- Surfaces --- */ --bg-canvas:var(--paper-100);--bg-surface:var(--paper-50);--bg-raised:var(--white);--bg-inset:var(--paper-200); --bg-hover:var(--k-a06);--bg-active:var(--k-a10);--bg-selected:var(--flare-a12); --surface-card:var(--paper-50);--surface-overlay:rgba(236,238,225,.78);--surface-code:var(--paper-200); --surface-nav:rgba(246,247,238,.76); /* --- Text: four ranks, same hierarchy, inverted --- */ --text-primary:#16191D;--text-secondary:#454C53;--text-muted:#636A72;--text-faint:#7C848C; --text-inverse:var(--paper-50);--text-accent:var(--flare-600);--text-link:var(--flare-600);--text-link-hover:var(--flare-700); /* --- Structure --- */ --border-hairline:rgba(6,7,8,.11);--border-default:rgba(6,7,8,.17);--border-strong:rgba(6,7,8,.30);--border-focus:var(--flare-600); --corner-color:rgba(6,7,8,.30);--corner-color-accent:var(--flare-600); /* --- Accent: steps down a rank so white text still clears contrast --- */ --accent:var(--flare-600);--accent-hover:var(--flare-500);--accent-press:var(--flare-700);--accent-fg:#FFFFFF;--accent-quiet:var(--flare-a12); --status-live:var(--signal-600);--status-building:var(--amber-600);--status-error:var(--rose-600);--status-idle:var(--gray-500);--status-info:var(--azure-600); --selection-bg:var(--flare-a24); --control-track:#B9BFC6;--control-knob:var(--white); /* --- Elevation: the hard offset block stays, at paper weight --- */ --shadow-1:2px 2px 0 rgba(18,21,25,.13); --shadow-2:3px 3px 0 rgba(18,21,25,.15); --shadow-3:5px 5px 0 rgba(18,21,25,.17); --shadow-4:8px 8px 0 rgba(18,21,25,.19); --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.45); --shadow-inset-well:inset 0 0 0 1px rgba(18,21,25,.12); --ring-focus:0 0 0 2px var(--bg-canvas),0 0 0 4px var(--flare-600); --glow-accent:0 0 0 1px var(--flare-600),4px 4px 0 var(--flare-a24); --glow-live:0 0 0 1px rgba(23,168,99,.42); /* --- Wash: the same bloom, dialled back so paper stays paper --- */ --wash-tint:rgba(255,77,23,.07); --bg-wash-neutral:radial-gradient(110% 90% at 50% -10%,rgba(6,7,8,.045),transparent 60%); } /* A themed subtree paints its own canvas rather than inheriting the page's */ [data-theme="light"],[data-theme="paper"]{background:var(--bg-canvas);color:var(--text-primary)}