Spaces:
Running
Running
| /* === Light theme ("paper") — a complete inversion, not a tint pass === | |
| Applied with data-theme="light" (or the legacy alias data-theme="paper") on | |
| <html>, <body> 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)} | |