/* ═══════════════════════════════════════════════════════════ WINDOWS 95 THEME Activate: add data-style="win95" to . Owns its palette (the VGA 16), type scale and radius scale outright; only the class contract in base.css is shared. ═══════════════════════════════════════════════════════════ CONTRAST RESOLUTION — read this first: Faithful Win95 wants a teal desktop (#008080) directly under body text, AND a silver chrome face (#c0c0c0) under every panel/control. Those two backgrounds are ~3x apart in relative luminance (teal L≈0.17, silver L≈0.53) — it is mathematically impossible for one flat --c-text/--c-muted value to clear 4.5:1 against BOTH (light-enough-for-teal forces L≥0.94, which then fails on silver, and vice versa). So: - --c-text / --c-text-sub / --c-muted are "desktop" tokens: near-white, tuned to clear AA on --c-bg (the teal). They are what body copy, headings, and any loose page-level text (field labels/hints, breadcrumbs/page text) use. - Every component that paints its own --w95-face / sunken field background (buttons, cards, alerts, nav, tabs, inputs, pagination…) sets its OWN text colour explicitly via --w95-text-on-face / --w95-text-muted-on-face (dark ink in light mode, light ink in dark mode) instead of inheriting --c-text. Every such pairing is verified below. Dark mode has no such conflict: the near-black desktop (#0a1a1a) and dark-gray chrome (#2b2b2b) are close enough in luminance that a single light text ramp clears AA on both, so --c-text/--c-muted are reused as-is by every dark-mode surface. ═══════════════════════════════════════════════════════════ */ /* ── Win95 light ── Text/bg pairs verified (WCAG relative-luminance formula): white #ffffff on teal #008080 → 4.77:1 (--c-text) #fafafa on teal #008080 → 4.57:1 (--c-muted / --c-text-sub) black #000000 on silver #c0c0c0 → 11.55:1 (--w95-text-on-face) #404040 on silver #c0c0c0 → 5.70:1 (--w95-text-muted-on-face) white on navy #000080 → 16.0:1 (--c-on-accent) ── */ /* ── Win95 palette ── the dark half of the VGA 16. These are the actual system colours of the era, which is why the ink on them is white rather than the near-black every other theme uses. ── */ html[data-style='win95'] { --p-accent-1: #008080; --p-accent-2: #99005c; --p-accent-3: #6b6b00; --p-accent-4: #800080; --p-accent-5: #000080; --p-accent-6: #800000; --p-accent-7: #006100; --p-accent-8: #9c4200; --p-info: #000080; --p-success: #006100; --p-warn: #6b6b00; --p-danger: #800000; --p-on-accent: #ffffff; /* --c-text here is the DESKTOP token (white on teal), so blending an accent toward it lightens it. That is correct for text sitting on the teal desktop, so the ratio stays low; anything sitting on the silver chrome face overrides the colour outright below. */ --ink-mix: 22%; --w95-alert-info-dark: #6f9dff; /* 95 chrome was small, tight and unapologetically system-sized. */ --t-h1: 1.6rem; --t-h2: 1.2rem; --t-h3: 1rem; --t-lh-display: 1.25; --t-lh-heading: 1.3; --t-lh-body: 1.45; --t-track-display: 0; --t-track-heading: 0; /* 95 had exactly one corner: none. --r-round is left alone — the radio was the sole round control, and base already routes it through that token. The universal rule below is a backstop for unstyled markup. */ --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0; } html[data-style='win95'] { --c-bg: #008080; --c-surface: #c0c0c0; --c-border: #808080; --c-muted: #fafafa; --c-text: #ffffff; --c-text-sub: #fafafa; --c-dot: #006666; --c-nav-bg: #c0c0c0; --c-accent: #000080; --c-accent-2: #800000; --c-accent-3: #808000; /* Navy accent — white on #000080 is 16.0:1, no near-black trap here. */ --c-on-accent: #ffffff; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); /* Bevel system — the two-tone 3D border technique used everywhere below: border-color: light dark dark light = raised, border-color: dark light light dark = sunken (inverted). */ --w95-face: #c0c0c0; --w95-light: #ffffff; --w95-dark: #808080; --w95-darker: #404040; --w95-field-bg: #ffffff; --w95-focus: #000000; --w95-text-on-face: #000000; --w95-text-muted-on-face: #404040; /* Hand-picked alert-title tints — the raw --p-* palette is tuned for light/white surfaces and falls under 4.5:1 on silver (e.g. raw --p-accent-5 on #c0c0c0 is only ~1.8:1), so these are darkened variants of the same hues, individually checked against #c0c0c0. */ --w95-alert-success: #004d1a; /* 5.56:1 on silver */ --w95-alert-warn: #5c4700; /* 4.90:1 on silver */ --w95-alert-error: #8b0000; /* 5.50:1 on silver */ } /* ── Win95 dark ── "night" 95: near-black desktop, dark gray chrome. Both backgrounds are dark enough that one light text ramp clears AA on both — no split needed here. #f0f0f0 on #0a1a1a (bg) → 15.7:1 #f0f0f0 on #2b2b2b (surface) → 12.4:1 #b0b0b0 on #0a1a1a (bg) → 8.2:1 (--c-muted) #b0b0b0 on #2b2b2b (surface) → 6.5:1 (--c-muted) white on #2a52be (accent) → 6.9:1 (--c-on-accent) ── */ html[data-style='win95'][data-theme='dark'] { --c-bg: #0a1a1a; --c-surface: #2b2b2b; --c-border: #5a5a5a; --c-muted: #b0b0b0; --c-text: #f0f0f0; --c-text-sub: #c8c8c8; --c-dot: #143333; --c-nav-bg: #2b2b2b; --c-accent: #2a52be; --c-accent-2: #b23a3a; --c-accent-3: #b2b23a; --c-on-accent: #ffffff; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); --w95-face: #2b2b2b; --w95-light: #ffffff; --w95-dark: #1a1a1a; --w95-darker: #000000; --w95-field-bg: #1a1a1a; --w95-focus: #ffffff; --w95-text-on-face: #f0f0f0; --w95-text-muted-on-face: #c8c8c8; --w95-alert-success: #4ee08a; /* 8.33:1 on #2b2b2b */ --w95-alert-warn: #e8c547; /* 8.43:1 on #2b2b2b */ --w95-alert-error: #ff6b6b; /* 5.10:1 on #2b2b2b */ } /* ── Win95 dark (system preference) ── */ @media (prefers-color-scheme: dark) { html[data-style='win95']:not([data-theme]) { --c-bg: #0a1a1a; --c-surface: #2b2b2b; --c-border: #5a5a5a; --c-muted: #b0b0b0; --c-text: #f0f0f0; --c-text-sub: #c8c8c8; --c-dot: #143333; --c-nav-bg: #2b2b2b; --c-accent: #2a52be; --c-accent-2: #b23a3a; --c-accent-3: #b2b23a; --c-on-accent: #ffffff; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-text); --c-grad-h1-to: var(--c-text); --w95-face: #2b2b2b; --w95-light: #ffffff; --w95-dark: #1a1a1a; --w95-darker: #000000; --w95-field-bg: #1a1a1a; --w95-focus: #ffffff; --w95-text-on-face: #f0f0f0; --w95-text-muted-on-face: #c8c8c8; --w95-alert-success: #4ee08a; --w95-alert-warn: #e8c547; --w95-alert-error: #ff6b6b; } } /* ══════════════════════════════════════════════════════════ WIN95 STYLE OVERRIDES Applied to html[data-style='win95'] ══════════════════════════════════════════════════════════ */ /* ── System font stack, crisp (not smoothed) rendering ── */ html[data-style='win95'] body { font-family: Tahoma, 'MS Sans Serif', 'Segoe UI', sans-serif; -webkit-font-smoothing: auto; } html[data-style='win95'] h1, html[data-style='win95'] h2, html[data-style='win95'] h3 { font-family: Tahoma, 'MS Sans Serif', 'Segoe UI', sans-serif; font-weight: 700; } /* ── Kill all border-radius — 95 has square corners everywhere ── */ html[data-style='win95'] *, html[data-style='win95'] *::before, html[data-style='win95'] *::after { border-radius: 0 !important; } /* ── Sanctioned exception: Win95 radio buttons were round. Higher specificity than the universal kill rule above beats it even though both carry !important. ── */ html[data-style='win95'] input.radio { border-radius: 50% !important; } html[data-style='win95'] .radio::before { border-radius: 50% !important; } /* ── Nav bar: opaque silver chrome, bevel bottom edge, no blur. Also reskins