/* WKOS Skin System v2 — 4 types × 5 shades = 20 named looks. (WKOS IP #26 phase 6, 2026-08-04. Dane's locked model.) TWO AXES defined in this file, plus two independent settings defined in `wkos.css`: data-skin : original | modern | neon | shepard (TYPE / colorway — here) data-theme : light | midday | evening | dark | wild (SHADE — here) data-accent : cyan | purple | amber | emerald | rose (wkos.css — a user pick that must beat both axes above; see the cascade banner in wkos.css) data-density: compact | normal | spacious (wkos.css — geometry) Example: THE CONTRACT (v2) — REPLACES THE ZERO-REGRESSION CONTRACT. The retired contract read: `data-form="alpha" data-skin="original" data-theme="midday"` renders the app exactly as documented. That contract is DELIBERATELY RETIRED. Skin System v2 changes the app's appearance on every surface, by design: - `data-form` (alpha/beta) is REMOVED as an axis. Beta is now the permanent finish — 8px radii, flat surfaces, no aurora, no glow-lift, mono-display. There is no alpha to fall back to and nothing to toggle. - `classic` is DROPPED as a type name. Its palette WAS the live app's actual base (see the ORIGINAL note below), so it is absorbed into `original` rather than deleted; the palette this file previously called `original` survives under `modern`, whose surfaces were already identical to it. - `midday` and `dark` no longer render identically; `evening` is a real fourth brightness tier between them. What v2 DOES guarantee: every type × shade combination sets the full token contract below, and no shade block sets an accent token — so the Accent picker composes on top of all 20 looks (the WKOS-FP #0.60.102 invariant). TYPES - original : the live app's own instrument-light set — deep-navy void, purple identity, cyan state, amber spark. (Full triad.) NOTE: these are the values this file used to file under `classic`. `wkos.css`'s `:root` block has always carried them, and its own port comment admitted the mislabel. Under v2 the name follows the app, not this file's old bookkeeping. - modern : tempered navy, single purple accent + matrix green. (Formerly this file's `original` surfaces, minus the triad.) - neon : true black + deep purple. Single-accent (cyan/amber = purple). - shepard : matrix-green terminal on a green-black void — the Shepard agentic HUD. Green is identity. Single-accent. SHADES — a monotonic brightness ladder, per type - light : light canvas, dark ink - midday : the signature working dark surface (default) - evening : one step darker than midday, derived per type by interpolating that type's OWN midday -> dark surface ramp. Not a new hue. - dark : deepest - wild : the experimental / playground slot — free to break the ladder. Token contract every block sets: --canvas --surface --elevated --text --muted --border --accent --accent-2 --accent-3 --success --link */ :root{ --wk-radius:8px; --wk-line:1px; --accent-fg:#ffffff; } /* ============================ ORIGINAL ============================ */ /* The live app's own set. These are the values this file previously filed under `classic`; `wkos.css`'s :root has always carried them. v2 drops the `classic` name and lets `original` mean what the app actually looks like. */ [data-skin="original"][data-theme="light"]{ --canvas:#f1f5f9; --surface:#ffffff; --elevated:#ffffff; --text:#0f1729; --muted:#5a6785; --border:#d5deea; --accent:#6d28d9; --accent-2:#0284c7; --accent-3:#b45309; --success:#16a34a; --link:#6d28d9; } [data-skin="original"][data-theme="midday"]{ /* the signature working dark surface */ --canvas:#0a0e1a; --surface:#0f1729; --elevated:#121c33; --text:#f1f5f9; --muted:#8595b8; --border:#1e2a42; --accent:#7c3aed; --accent-2:#0ea5e9; --accent-3:#f59e0b; --success:#4ade80; --link:#38bdf8; } [data-skin="original"][data-theme="evening"]{ /* derived: midpoint of this skin's own midday -> dark */ --canvas:#080b15; --surface:#0d1322; --elevated:#111a2e; --text:#f1f5f9; --muted:#7f8eae; --border:#1b263d; --accent:#7c3aed; --accent-2:#0ea5e9; --accent-3:#f59e0b; --success:#4ade80; --link:#38bdf8; } [data-skin="original"][data-theme="dark"]{ --canvas:#05080f; --surface:#0a0f1a; --elevated:#0f1729; --text:#f1f5f9; --muted:#7987a3; --border:#172238; --accent:#7c3aed; --accent-2:#0ea5e9; --accent-3:#f59e0b; --success:#4ade80; --link:#38bdf8; } [data-skin="original"][data-theme="wild"]{ /* playground slot */ --canvas:#05030f; --surface:#160c2e; --elevated:#241546; --text:#f1f5f9; --muted:#a99fd0; --border:#2f1c5e; --accent:#a855f7; --accent-2:#38bdf8; --accent-3:#fbbf24; --success:#4ade80; --link:#38bdf8; } /* ============================ MODERN ============================ */ /* Tempered navy, single purple accent + matrix green. These surfaces are the ones this file previously filed under `original`; nothing is lost by the rename above, because `modern` already carried the identical ramp. */ [data-skin="modern"][data-theme="light"]{ --canvas:#eef2f8; --surface:#ffffff; --elevated:#ffffff; --text:#12192f; --muted:#5f6b82; --border:#cfd8e6; --accent:#7c3aed; --accent-2:#7c3aed; --accent-3:#7c3aed; --success:#00b339; --link:#00b339; } [data-skin="modern"][data-theme="midday"]{ --canvas:#12192f; --surface:#1b294a; --elevated:#22335a; --text:#eef2f8; --muted:#8f9ebe; --border:#1e2a42; --accent:#7c3aed; --accent-2:#7c3aed; --accent-3:#7c3aed; --success:#00ff41; --link:#00ff41; } [data-skin="modern"][data-theme="evening"]{ /* derived: midpoint of this skin's own midday -> dark */ --canvas:#0f1528; --surface:#17233f; --elevated:#1e2d4e; --text:#eef2f8; --muted:#8f9ebe; --border:#1b253a; --accent:#7c3aed; --accent-2:#7c3aed; --accent-3:#7c3aed; --success:#00ff41; --link:#00ff41; } [data-skin="modern"][data-theme="dark"]{ --canvas:#0c1120; --surface:#131d34; --elevated:#1a2742; --text:#eef2f8; --muted:#8f9ebe; --border:#172032; --accent:#7c3aed; --accent-2:#7c3aed; --accent-3:#7c3aed; --success:#00ff41; --link:#00ff41; } [data-skin="modern"][data-theme="wild"]{ /* playground slot */ --canvas:#0a0a1f; --surface:#1e1245; --elevated:#2c1a5e; --text:#eef2f8; --muted:#a99fd0; --border:#34236a; --accent:#a855f7; --accent-2:#39ff14; --accent-3:#a855f7; --success:#39ff14; --link:#39ff14; } /* ============================ NEON ============================ */ [data-skin="neon"][data-theme="light"]{ --canvas:#f5f3fb; --surface:#ffffff; --elevated:#ffffff; --text:#140b26; --muted:#5f5675; --border:#e0d8f0; --accent:#7c3aed; --accent-2:#7c3aed; --accent-3:#7c3aed; --success:#00b339; --link:#7c3aed; } [data-skin="neon"][data-theme="midday"]{ --canvas:#08060f; --surface:#150d28; --elevated:#1e1338; --text:#eef2f8; --muted:#9488b5; --border:#2a1c44; --accent:#7c3aed; --accent-2:#7c3aed; --accent-3:#7c3aed; --success:#00ff41; --link:#00ff41; } [data-skin="neon"][data-theme="evening"]{ /* derived: midpoint of this skin's own midday -> dark */ --canvas:#040308; --surface:#110b20; --elevated:#1a1130; --text:#eef2f8; --muted:#8f83af; --border:#26193d; --accent:#7c3aed; --accent-2:#7c3aed; --accent-3:#7c3aed; --success:#00ff41; --link:#00ff41; } [data-skin="neon"][data-theme="dark"]{ --canvas:#000000; --surface:#0c0818; --elevated:#150e28; --text:#eef2f8; --muted:#8a7ea8; --border:#211636; --accent:#7c3aed; --accent-2:#7c3aed; --accent-3:#7c3aed; --success:#00ff41; --link:#00ff41; } [data-skin="neon"][data-theme="wild"]{ /* playground slot */ --canvas:#000000; --surface:#1a0033; --elevated:#2a0a52; --text:#eef2f8; --muted:#b39ddb; --border:#3d1170; --accent:#a855f7; --accent-2:#a855f7; --accent-3:#a855f7; --success:#39ff14; --link:#39ff14; } /* ============================ SHEPARD ============================ */ /* Shepard agentic HUD — matrix-green terminal on a green-black void. Green is identity here (single-accent, like Neon is purple). RE-RAMPED 2026-08-05 (Dane: "fix up the shepard colors"). The old midday and dark blocks encoded two different design INTENTS rather than one ladder — midday was "the HUD as pictured", dark was "void black + lighter-black cards" — so surface/elevated/border got LIGHTER as the shade got darker, and the old midday/dark surface pair (#08140a vs #0a140a) was indistinguishable. Midday's canvas was #030603, essentially black, leaving no headroom to darken beneath it; it is lifted here the minimum that buys a real ladder. Identity is untouched: accent stays #00ff41, text stays #c8f7d0, surfaces stay green-tinted near-black. `muted` deliberately runs the OTHER way, brightening as the surfaces darken, which holds legibility and matches the original instinct. Measured, not eyeballed: worst muted contrast across the whole ladder is 4.61:1 against its own elevated surface. The token test asserts both the monotonicity and the 4.5:1 floor for all four types. */ [data-skin="shepard"][data-theme="light"]{ --canvas:#eef5ee; --surface:#ffffff; --elevated:#ffffff; --text:#052b12; --muted:#4a6b52; --border:#c8ddca; --accent:#0a8f30; --accent-2:#0a8f30; --accent-3:#0a8f30; --success:#0a8f30; --link:#0a8f30; } [data-skin="shepard"][data-theme="midday"]{ /* the HUD, lifted just enough to leave headroom below */ --canvas:#060f08; --surface:#0d1f10; --elevated:#143017; --text:#c8f7d0; --muted:#6a9e73; --border:#1d5228; --accent:#00ff41; --accent-2:#00ff41; --accent-3:#00ff41; --success:#00ff41; --link:#00ff41; } [data-skin="shepard"][data-theme="evening"]{ /* derived: midpoint of this skin's own midday -> dark */ --canvas:#030804; --surface:#0a180b; --elevated:#0f2511; --text:#c8f7d0; --muted:#70a279; --border:#16401f; --accent:#00ff41; --accent-2:#00ff41; --accent-3:#00ff41; --success:#00ff41; --link:#00ff41; } [data-skin="shepard"][data-theme="dark"]{ /* void black - green-black cards - true matrix green */ --canvas:#000000; --surface:#061005; --elevated:#0a1a0b; --text:#c8f7d0; --muted:#76a67e; --border:#0f2e15; --accent:#00ff41; --accent-2:#00ff41; --accent-3:#00ff41; --success:#00ff41; --link:#00ff41; } [data-skin="shepard"][data-theme="wild"]{ /* playground slot - acid lime */ --canvas:#000000; --surface:#0a1f00; --elevated:#123300; --text:#e5ffcc; --muted:#7aa32e; --border:#1f4d00; --accent:#39ff14; --accent-2:#adff2f; --accent-3:#39ff14; --success:#39ff14; --link:#adff2f; }