/* AutoSteward - Design Themes * Multiple premium, selectable design presets layered over the token system in * styles.css. Each preset re-defines the brand/neutral/accent tokens the whole * app already consumes (--navy, --surface, --sidebar-bg, --blue …) for both the * light and dark appearance, so switching design restyles every screen without * touching component rules. * * Axis: html[data-design=""] x html[data-theme="light|dark"] * Default (no attribute / "alpine") = Alpine Clarity, the white-rail sky-blue identity. * * NINE designs, and every one of them carries the blue AutoSteward icon on its sidebar. See the * palette section for why that is a rule and not a preference. * * This file loads AFTER styles.css. It also re-points the four hardcoded accent * surfaces (primary button, active sidebar link, avatar, brand mark) to themeable * --accent* tokens so the accent hue follows the chosen design. */ /* ---- Accent token defaults (Alpine, the default design) + re-pointing of hardcoded surfaces ---- */ :root{ --accent:#0369a1; /* active nav / dots */ --accent-ink:#ffffff; /* text ON the accent */ --accent-strong:#075985; /* primary button */ --accent-deep:#0c4a6e; /* button hover / avatar / mark */ --accent-glow:#7dd3fc; /* active-link inset highlight */ } .button.primary{background:var(--accent-strong);border-color:color-mix(in srgb,var(--accent-strong) 86%,#000)} .button.primary:hover{background:var(--accent-deep)} .sidebar-link.active{background:var(--accent);box-shadow:inset 3px 0 0 var(--accent-glow)} .account-avatar{background:var(--accent-deep);color:var(--accent-deep-ink,#fff)} .sidebar-brand-mark{color:var(--accent-deep)} /* AutoSteward logo mark: the SVG carries its own rounded background, so drop the host box chrome. */ .sidebar-brand-mark.brand-logo{background:transparent;border:0;padding:0;overflow:hidden} .sidebar-brand-mark.brand-logo svg{display:block;width:100%;height:100%} .kpi-card:before{background:var(--accent)} .activity-dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)} /* ============================================================ * STRUCTURAL layer - each design also varies SHAPE, TYPE, and DEPTH, * not only color. These tokens re-point the partner components so a * design can be sharp vs rounded, flat vs elevated, sans vs serif vs mono. * ============================================================ */ /* ── The AutoSteward type system ─────────────────────────────────────────────── * ONE professional UI stack for the whole product. Headings, figures, controls, * navigation, panels, tables, labels and helper text all use the same interface * family so no normal dealer workflow reads like terminal output. Inter is first * when installed; Windows falls cleanly to Segoe UI and then the platform sans. * * Monospace is reserved for genuinely technical identifiers/output through * --font-code (VINs, checksums, hashes, diagnostic/code text). It is not a normal * heading, KPI, report, navigation, control, or table-content face. * ───────────────────────────────────────────────────────────────────────────── */ :root{--radius:14px;--radius-sm:10px;--panel-shadow:var(--shadow); --font-code:"Space Mono",ui-monospace,Consolas,monospace; --font-head:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; --font-ui:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; --head-spacing:0} body{font-family:var(--font-ui)} /* Design/theme swaps are INSTANT for anything painted from a token, and deliberately. * * This rule used to transition background-color, color, border-color, fill and stroke as well, * to stop previewing a design from hard-flashing. Every one of those properties on these elements * resolves through a custom property, and Chrome does not re-run a transition when a var() inside * the transitioned property changes - the element simply keeps its old paint. So the smoothing * did not smooth the swap, it FROZE it. * * It was measured on body itself: with the midnight design selected, --ink resolved to #e6edf7 * while body still painted rgb(20,36,58), and it stayed wrong through a reflow and a round trip * back through another design. body is the element every unstyled piece of text inherits from, * so one stuck value mis-coloured the whole app. Same class of bug as the header search button * that stayed white in dark mode. * * box-shadow is kept: it is the one property here that is written literally rather than through * a token, so it still animates correctly. */ .panel,.info-card,.kpi-card,.dms-sidebar,.desktop-app-header,body,.quick-card,.parity-quick-card,.button,.parity-kpi-asset,.quick-action-image,.dms-ico{transition:box-shadow .22s ease} .page-heading h1,.dashboard-heading h1,.panel h2,.info-card h2,.panel-heading h2,.vehicle-editor-heading h1, .section-title h2,.system-tab-heading h2,.branding-background-card h3,.kpi-copy strong{font-family:var(--font-head);letter-spacing:var(--head-spacing)} .panel,.info-card,.kpi-card,.editor-section,.vendor-editor-card,.branding-background-card,.report-card,.file-card, .activity-retention-card,.system-overview-card,.warning-detail-card,.quick-card,.parity-quick-card,.toolbar, .security-gate-card,.design-swatch-card,.design-preview-bar,.notice{border-radius:var(--radius)} .panel,.info-card,.kpi-card,.editor-section,.vendor-editor-card,.report-card,.file-card,.activity-retention-card, .system-overview-card,.warning-detail-card{box-shadow:var(--panel-shadow)} .button,.search,input,select,textarea{border-radius:var(--radius-sm)} /* Per-design CORNER LANGUAGE and DEPTH. Alpine (14px, elevated) is the default declared above. * Nine designs, seven distinct radii and a clean split between elevated and hairline-flat, so two * designs never share both. This is half of what makes them feel like different products; the * other half is the active-nav motif at the foot of this file. */ html[data-design="sapphire"]{--radius:16px;--radius-sm:11px} html[data-design="ledger"]{--radius:4px;--radius-sm:4px;--panel-shadow:none;--head-spacing:0} html[data-design="steward-classic"]{--radius:0px;--radius-sm:0px;--panel-shadow:none;--head-spacing:0} html[data-design="evergreen"]{--radius:12px;--radius-sm:9px} html[data-design="claret"]{--radius:0px;--radius-sm:0px;--panel-shadow:none;--head-spacing:.01em} html[data-design="sandstone"]{--radius:10px;--radius-sm:8px} html[data-design="midnight"]{--radius:12px;--radius-sm:9px} html[data-design="paper"]{--radius:6px;--radius-sm:5px;--panel-shadow:none;--head-spacing:0} /* ---- Per-design TYPOGRAPHY: a distinct heading + body face per identity. Local Windows fonts only (no network); font is theme-independent so each pairing applies in BOTH light and dark. This is what makes each design read as its own product rather than a recolor. ---- */ /* Typeface is NO LONGER a per-design axis. Each preset used to pick its own pairing, which meant the product had ten type identities and therefore none. The single AutoSteward system is declared once at :root above; presets vary colour and radius. The only exception is "Dealer DMS - Original", at the foot of this file. */ /* Per-design ICON character: stroke weight + corner language so icons belong to each identity (sharp/thin for Onyx & serif themes, bold-round for warm themes). */ /* Sharp and thin for the flat, square-cornered designs; bold and round for the elevated ones. */ html[data-design="claret"] .dms-ico,html[data-design="steward-classic"] .dms-ico{stroke-width:1.4px;stroke-linejoin:miter;stroke-linecap:butt} html[data-design="ledger"] .dms-ico,html[data-design="paper"] .dms-ico{stroke-width:1.5px;stroke-linejoin:miter;stroke-linecap:butt} html[data-design="midnight"] .dms-ico{stroke-width:1.45px} html[data-design="sapphire"] .dms-ico,html[data-design="sandstone"] .dms-ico{stroke-width:1.8px} html[data-design="alpine"] .dms-ico,html[data-design="evergreen"] .dms-ico{stroke-width:1.95px} /* Quick-action icon PERSONALITY per design so the icon set clearly belongs to each identity: filled chip / soft pill / sharp square / quiet tint / serif underline. */ /* ---- PER-DESIGN ICON IDENTITY - five distinct icon "sets" via treatment, so each design's dashboard icons read as their own family, not the same glyph recolored. Applies to KPI + quick-action icons. KPI wrapper uses currentColor (danger stays red even as a solid tile); quick-action uses the design accent. ---- */ .quick-action-image{box-sizing:content-box;color:var(--accent)} /* 1 · SOLID tile, white icon — the elevated, rounded designs. */ html[data-design="sapphire"] .parity-kpi-asset,html[data-design="alpine"] .parity-kpi-asset, html[data-design="evergreen"] .parity-kpi-asset{background:currentColor;padding:10px} html[data-design="sapphire"] .parity-kpi-asset .dms-ico,html[data-design="alpine"] .parity-kpi-asset .dms-ico, html[data-design="evergreen"] .parity-kpi-asset .dms-ico{color:var(--surface-strong,#fff)} html[data-design="sapphire"] .quick-action-image,html[data-design="alpine"] .quick-action-image, html[data-design="evergreen"] .quick-action-image{background:var(--accent);color:var(--accent-ink,#fff);padding:8px} html[data-design="sapphire"] .parity-kpi-asset,html[data-design="sapphire"] .quick-action-image{border-radius:999px} html[data-design="alpine"] .parity-kpi-asset,html[data-design="alpine"] .quick-action-image{border-radius:14px} html[data-design="evergreen"] .parity-kpi-asset,html[data-design="evergreen"] .quick-action-image{border-radius:12px} /* 2 · SOFT tinted circle, accent icon — Sandstone. */ html[data-design="sandstone"] .parity-kpi-asset{background:color-mix(in srgb,currentColor 15%,transparent);border-radius:999px;padding:10px} html[data-design="sandstone"] .quick-action-image{background:color-mix(in srgb,var(--accent) 15%,transparent);border-radius:999px;padding:8px} /* 3 · BARE, no chip — the two designs with no decoration to spend. */ html[data-design="paper"] .parity-kpi-asset{background:none;padding:0} html[data-design="paper"] .quick-action-image{background:none;padding:0} /* 4 · UNDERLINE rule, accent icon — Vintage Ledger. Editorial, matches its nav. */ html[data-design="ledger"] .parity-kpi-asset{background:none;border-radius:0;box-shadow:inset 0 -2.5px 0 currentColor;padding:8px 8px 10px} html[data-design="ledger"] .quick-action-image{background:none;border-radius:0;box-shadow:inset 0 -2.5px 0 var(--accent);padding:6px 6px 8px} /* 5 · TINTED box, accent icon — Midnight (rounded) and Claret / Classic (square). */ html[data-design="midnight"] .parity-kpi-asset,html[data-design="claret"] .parity-kpi-asset, html[data-design="steward-classic"] .parity-kpi-asset{background:color-mix(in srgb,currentColor 22%,transparent);padding:8px} html[data-design="midnight"] .quick-action-image,html[data-design="claret"] .quick-action-image, html[data-design="steward-classic"] .quick-action-image{background:color-mix(in srgb,var(--accent) 26%,transparent);padding:8px} html[data-design="midnight"] .parity-kpi-asset,html[data-design="midnight"] .quick-action-image{border-radius:10px} html[data-design="claret"] .parity-kpi-asset,html[data-design="claret"] .quick-action-image, html[data-design="steward-classic"] .parity-kpi-asset,html[data-design="steward-classic"] .quick-action-image{border-radius:0} /* Dashboard KPI icon chips ALSO carry per-design shape (pill / rounded / sharp / underline), while keeping the semantic color via currentColor. */ /* Base KPI icon box - per-design treatments above define the actual chip/fill/border. */ .parity-kpi-asset{padding:8px} /* ---- Design picker: a REAL mini app preview per swatch (not an abstract mockup). Each swatch renders a tiny dashboard IN that design: rail + nav motif, a title in the design's font, KPI tiles (flat vs elevated), and a table row with the accent. ---- */ .design-swatch-card{background:none;border:0;padding:0;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:10px} .design-swatch-card .dmp{display:block;border-radius:calc(var(--r) + 5px);overflow:hidden;border:1px solid rgba(0,0,0,.10);background:var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.13);transition:transform .18s ease,box-shadow .18s ease} .design-swatch-card:hover .dmp{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.2)} .design-swatch-card[aria-pressed="true"] .dmp{outline:2px solid var(--accent);outline-offset:2px} .dmp-bar{display:flex;gap:4px;padding:6px 8px;background:rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.06)} .dmp-bar i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.22)} .dmp-body{display:grid;grid-template-columns:38px 1fr;height:132px} .dmp-rail{background:var(--rail);padding:8px 6px;display:flex;flex-direction:column;gap:4px} .dmp-brand{height:20px;width:20px;margin:0 auto 6px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))} .dmp-brand svg{display:block;width:100%;height:100%} .dmp-nav{height:5px;border-radius:6px;background:rgba(255,255,255,.30)} .dmp-nav.active{background:rgba(255,255,255,.9)} .design-swatch-card[data-motif="pill"] .dmp-nav{border-radius:999px} .design-swatch-card[data-motif="pill"] .dmp-nav.active{background:var(--accent);box-shadow:0 2px 5px rgba(0,0,0,.3)} .design-swatch-card[data-motif="fill"] .dmp-rail{padding-left:0;padding-right:0} .design-swatch-card[data-motif="fill"] .dmp-nav{border-radius:0} .design-swatch-card[data-motif="fill"] .dmp-nav.active{background:var(--accent)} .design-swatch-card[data-motif="bar"] .dmp-nav.active{background:rgba(255,255,255,.88);box-shadow:inset 3px 0 0 var(--accent)} .design-swatch-card[data-motif="underline"] .dmp-nav.active{background:transparent;box-shadow:inset 0 -2px 0 var(--accent);border-radius:0} .design-swatch-card[data-motif="quiet"] .dmp-nav.active{background:color-mix(in srgb,var(--accent) 50%,rgba(255,255,255,.3))} .dmp-main{padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0} .dmp-top{display:flex;align-items:center;gap:6px} .dmp-title{font-family:var(--dfont);font-size:12px;font-weight:700;color:var(--ink);line-height:1} .dmp-search{flex:1;height:9px;border-radius:calc(var(--r) * .6);background:color-mix(in srgb,var(--ink) 9%,transparent);border:1px solid color-mix(in srgb,var(--ink) 13%,transparent)} .dmp-btn{width:22px;height:10px;border-radius:calc(var(--r) * .6);background:var(--accent);flex:none} .dmp-chart{display:flex;align-items:flex-end;gap:4px;height:17px;padding:0 1px} .dmp-chart i{flex:1;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--accent) 55%,transparent)} .dmp-chart i:nth-child(1){height:42%}.dmp-chart i:nth-child(2){height:72%}.dmp-chart i:nth-child(3){height:52%}.dmp-chart i:nth-child(4){height:92%}.dmp-chart i:nth-child(5){height:66%} .dmp-kpis{display:flex;gap:6px} /* The swatch carries the previewed design's OWN --surface inline, so a hardcoded white chip showed a light card inside a dark design's preview - and the label on it used that design's light ink, which made it unreadable. */ .dmp-kpi{flex:1;height:21px;border-radius:calc(var(--r) * .55);background:var(--surface);display:flex;align-items:center;gap:4px;padding:0 6px} .design-swatch-card[data-flat="1"] .dmp-kpi{border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);box-shadow:none;background:var(--surface)} .design-swatch-card[data-flat="0"] .dmp-kpi{box-shadow:0 1px 3px rgba(0,0,0,.11)} .dmp-kdot{width:9px;height:9px;border-radius:calc(var(--r) * .5);background:var(--accent);flex:none} .dmp-kbar{height:5px;flex:1;border-radius:3px;background:color-mix(in srgb,var(--ink) 22%,transparent)} .dmp-rows{display:flex;flex-direction:column;gap:4px} .dmp-row{display:flex;align-items:center;gap:6px} .dmp-cell{height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 18%,transparent)} .dmp-cell.w1{width:26%}.dmp-cell.w2{flex:1} .dmp-pill{width:16px;height:7px;border-radius:calc(var(--r) * .6 + 1px);background:color-mix(in srgb,var(--accent) 32%,transparent);flex:none} /* The partner's raster icon twin. "Dealer DMS - Original" was the one design that showed it, and that design is gone — it was a navy reproduction of his app, kept for provenance, and it is in git history. The is still emitted alongside every icon, so it stays hidden here. */ .dms-ico-raster{display:none !important} /* Flat designs lean on borders for separation, since they have no shadow to do it with. */ html[data-design="ledger"] .panel, html[data-design="claret"] .panel,html[data-design="steward-classic"] .panel,html[data-design="paper"] .panel, html[data-design="ledger"] .info-card, html[data-design="claret"] .info-card,html[data-design="steward-classic"] .info-card,html[data-design="paper"] .info-card, html[data-design="steward-classic"] .kpi-card, html[data-design="claret"] .kpi-card,html[data-design="paper"] .kpi-card{border-width:1px} /* ===================================================================== * THE NINE PALETTES. * * One rule binds all of them, owner-directed: EVERY design must carry the blue AutoSteward * icon, in both appearances. That is not a colour preference — it is what stops the set from * drifting back to what it was. Eight of the previous ten rails were in the blue family, which * is exactly why the themes read as redundant and why the mark never looked right on them. * * So each --sidebar-bg and --sidebar-bg-2 below clears #0284C7 by at least 3:1 and sits outside * the blue hue family. tests/test_design_palettes.mjs measures every one of the eighteen. A new design * whose sidebar the logo cannot sit on fails that test rather than shipping. * * --accent-ink is the text colour that goes ON the accent — the primary button and, in most * designs, the active nav block. It used to be a hardcoded #fff in styles.css, which was fine * while every accent was a dark navy and quietly wrong the moment a design had a bright one: * white on Alpine's dark-mode sky blue measured 2.6:1. Each block states it. * ===================================================================== */ /* ── ALPINE CLARITY — white rail, sky blue, rounded, elevated. THE DEFAULT. ────────── * Sampled from autosteward-alpine-clarity. The light rail is the whole look: a white * sidebar that dissolves into the page. In dark it becomes a neutral charcoal rather than * the blue-grey it used to be — that rail measured 4.55:1 against the mark but sat 14° from * it in hue, which is the "blue on blue" the owner rejected. */ html[data-design="alpine"][data-theme="light"]{ --navy:#0f172a;--navy2:#1e293b;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0; --surface:#f8fafc;--surface-strong:#ffffff;--surface-soft:#f0f8fc;--canvas:#eef2f7; --input-bg:#ffffff;--input-ink:#0f172a;--header-bg:#ffffff; --sidebar-bg:#ffffff;--sidebar-bg-2:#f8fafc;--sidebar-ink:#0f172a;--sidebar-muted:#64748b; --blue:#0284c7;--bluesoft:#e0f2fe;--shadow:0 10px 30px rgba(15,23,42,.08); --accent:#0369a1;--accent-ink:#ffffff;--accent-strong:#075985;--accent-deep:#0c4a6e;--accent-glow:#7dd3fc; } html[data-design="alpine"][data-theme="dark"]{ --navy:#e2e8f0;--navy2:#cbd5e1;--ink:#e8eef6;--muted:#94a3b8;--line:#28323f; --surface:#141a22;--surface-strong:#1a212b;--surface-soft:#101720;--canvas:#0b1017; --input-bg:#111823;--input-ink:#e8eef6;--header-bg:#131a23; --sidebar-bg:#15171a;--sidebar-bg-2:#1e2126;--sidebar-ink:#e8eef6;--sidebar-muted:#8b9aad; --blue:#38bdf8;--bluesoft:#0c2b3d;--shadow:0 12px 34px rgba(0,0,0,.5); --accent:#38bdf8;--accent-ink:#08131b;--accent-strong:#7dd3fc;--accent-deep:#0369a1;--accent-glow:#7dd3fc; } /* ── SAPPHIRE — pale blue rail, royal blue, the largest corners and the deepest shadows. * The rail went cool near-white on the first pass, on the reasoning that its own description said * "royal blue on airy white". That made Sapphire into Alpine with bigger corners. A dark slate * rail then made it rhyme with AutoSteward Classic instead. Both were reported by the owner on * sight, which is the only reason either got caught. * * The constraint underneath is worth writing down, because it will come up again: a blue design * may not have a blue RAIL, because the mark has to sit on it. That leaves blue designs exactly * three rails — white, pale, or near-black. Alpine took white and Classic took black, so Sapphire * is pale, and the two light-railed blues are told apart by WEIGHT rather than by hue: Alpine is * airy, pill-shaped and shadowless; Sapphire is tinted, barred, 16px, and carries the deepest * shadow in the set. */ html[data-design="sapphire"][data-theme="light"]{ --navy:#0b3e8a;--navy2:#135bc0;--ink:#12233d;--muted:#5a6b86;--line:#cdd9ec; --surface:#f5f9ff;--surface-strong:#ffffff;--surface-soft:#e7f0fd;--canvas:#e6eefb; --input-bg:#ffffff;--input-ink:#12233d;--header-bg:#f5f9ff; --sidebar-bg:#e4edf9;--sidebar-bg-2:#e0eaf7;--sidebar-ink:#12233d;--sidebar-muted:#546582; --blue:#1f6fd6;--bluesoft:#e2eefc;--shadow:0 16px 38px rgba(11,62,138,.22); --accent:#114fab;--accent-ink:#ffffff;--accent-strong:#0d3f8c;--accent-deep:#0a3579;--accent-glow:#79b2f7; } html[data-design="sapphire"][data-theme="dark"]{ --navy:#cfe0ff;--navy2:#a6c8ff;--ink:#e6eefc;--muted:#a2b3cf;--line:#2b3f63; --surface:#12233f;--surface-strong:#172c4c;--surface-soft:#0e1c34;--canvas:#081428; --input-bg:#0d1d38;--input-ink:#e6eefc;--header-bg:#101f3a; --sidebar-bg:#232936;--sidebar-bg-2:#2d3444;--sidebar-ink:#e6eefc;--sidebar-muted:#a3b6d6; --blue:#6ea8f5;--bluesoft:#16305a;--shadow:0 12px 34px rgba(0,0,0,.5); --accent:#6ea8f5;--accent-ink:#08142a;--accent-strong:#9cc6fa;--accent-deep:#1f5cc0;--accent-glow:#79b2f7; } /* ── VINTAGE LEDGER — ivory rail, sage, deep green accent, hairline flat, underlined. ── * Sampled from autosteward-vintage-ledger: #fdfbf7 page, #f5f1e5 rail, #184a35 accent. * The dark appearance keeps the sage identity rather than becoming a generic dark theme — * a design a dealer chose for its warmth should still be recognisable at night. */ html[data-design="ledger"][data-theme="light"]{ --navy:#184a35;--navy2:#22684a;--ink:#161616;--muted:#4f4f4e;--line:#c3c2bf; --surface:#fdfbf7;--surface-strong:#ffffff;--surface-soft:#f5f1e5;--canvas:#f2eee1; --input-bg:#ffffff;--input-ink:#161616;--header-bg:#fdfbf7; --sidebar-bg:#f5f1e5;--sidebar-bg-2:#ece7d7;--sidebar-ink:#161616;--sidebar-muted:#6b6a63; --blue:#1266a3;--bluesoft:#e5ece4;--shadow:0 10px 26px rgba(60,55,40,.10); --accent:#184a35;--accent-ink:#ffffff;--accent-strong:#123a29;--accent-deep:#0c2a1d;--accent-glow:#7fbfa0; } html[data-design="ledger"][data-theme="dark"]{ --navy:#cfe5d8;--navy2:#a8ceb9;--ink:#ece8dd;--muted:#a8a396;--line:#3a3f38; --surface:#1c1f1b;--surface-strong:#232722;--surface-soft:#161915;--canvas:#101310; --input-bg:#171a16;--input-ink:#ece8dd;--header-bg:#191c18; --sidebar-bg:#141712;--sidebar-bg-2:#232a20;--sidebar-ink:#ece8dd;--sidebar-muted:#9a9589; --blue:#6fb3d8;--bluesoft:#1e2a22;--shadow:0 12px 34px rgba(0,0,0,.5); --accent:#4da97b;--accent-ink:#08150e;--accent-strong:#79c69d;--accent-deep:#2b6949;--accent-glow:#7fbfa0; } /* ── AUTOSTEWARD CLASSIC — bone, ink and cobalt. Square corners, no shadow anywhere. ── */ html[data-design="steward-classic"][data-theme="light"]{ --navy:#111111;--navy2:#2A2A28;--ink:#111111;--muted:#6B6A64;--line:#DCD9CF; --surface:#F7F6F2;--surface-strong:#ffffff;--surface-soft:#E7E5DE;--canvas:#EFEEE9; --input-bg:#ffffff;--input-ink:#111111;--header-bg:#EFEEE9; --sidebar-bg:#111111;--sidebar-bg-2:#2A2A28;--sidebar-ink:#ffffff;--sidebar-muted:#9C9B95; --blue:#1438C8;--bluesoft:#DDE2FA;--shadow:none; --accent:#1438C8;--accent-ink:#ffffff;--accent-strong:#0E2A9B;--accent-deep:#0a1f75;--accent-glow:#DDE2FA; } html[data-design="steward-classic"][data-theme="dark"]{ --navy:#EFEEE9;--navy2:#d6d5d0;--ink:#EFEEE9;--muted:#a8a79f;--line:#33332F; --surface:#1C1C1A;--surface-strong:#222220;--surface-soft:#141412;--canvas:#0e0e0d; --input-bg:#161614;--input-ink:#EFEEE9;--header-bg:#141412; --sidebar-bg:#09090a;--sidebar-bg-2:#1C1C1A;--sidebar-ink:#EFEEE9;--sidebar-muted:#8f8f8a; --blue:#8fa2ff;--bluesoft:#1e2660;--shadow:none; --accent:#8fa2ff;--accent-ink:#0b0d24;--accent-strong:#b3c0ff;--accent-deep:#2f47c0;--accent-glow:#1e2660; } /* ── EVERGREEN — deep forest rail on a pale mint page, rounded, quiet active state. ─── */ html[data-design="evergreen"][data-theme="light"]{ --navy:#0f5a3a;--navy2:#178a52;--ink:#16281f;--muted:#58705f;--line:#cadecd; --surface:#f3faf5;--surface-strong:#ffffff;--surface-soft:#e3f2e8;--canvas:#e6f2ea; --input-bg:#ffffff;--input-ink:#16281f;--header-bg:#f3faf5; --sidebar-bg:#092b1c;--sidebar-bg-2:#0e3323;--sidebar-ink:#e6f4ec;--sidebar-muted:#9ac4ac; --blue:#10864f;--bluesoft:#ddefe4;--shadow:0 12px 30px rgba(15,90,58,.14); --accent:#0b7245;--accent-ink:#ffffff;--accent-strong:#095c37;--accent-deep:#075030;--accent-glow:#63d69a; } html[data-design="evergreen"][data-theme="dark"]{ --navy:#c6efd6;--navy2:#98dcb4;--ink:#e4f2ea;--muted:#9cbaa8;--line:#274a37; --surface:#112a1e;--surface-strong:#163627;--surface-soft:#0d2117;--canvas:#061a11; --input-bg:#0c2318;--input-ink:#e4f2ea;--header-bg:#0f2519; --sidebar-bg:#05170f;--sidebar-bg-2:#0b2c1d;--sidebar-ink:#e4f2ea;--sidebar-muted:#90b09e; --blue:#45c983;--bluesoft:#123a26;--shadow:0 12px 34px rgba(0,0,0,.5); --accent:#3fc286;--accent-ink:#04150d;--accent-strong:#6fd8a6;--accent-deep:#12824f;--accent-glow:#63d69a; } /* ── CLARET — deep oxblood, square corners, flat cards, a left-bar active page. ─────── */ html[data-design="claret"][data-theme="light"]{ --navy:#7a1420;--navy2:#a51e2d;--ink:#221a1b;--muted:#6b5a5c;--line:#ddcfd0; --surface:#faf6f6;--surface-strong:#ffffff;--surface-soft:#efe0e1;--canvas:#efe8e8; --input-bg:#ffffff;--input-ink:#221a1b;--header-bg:#faf6f6; --sidebar-bg:#241416;--sidebar-bg-2:#3d1c1f;--sidebar-ink:#f3e9ea;--sidebar-muted:#c69ea1; --blue:#a5182a;--bluesoft:#f7e0e2;--shadow:0 12px 30px rgba(122,20,32,.14); --accent:#a5182a;--accent-ink:#ffffff;--accent-strong:#871220;--accent-deep:#6f1019;--accent-glow:#f18e97; } html[data-design="claret"][data-theme="dark"]{ --navy:#f4d6da;--navy2:#ecb0b6;--ink:#f2e7e8;--muted:#bba2a4;--line:#46292c; --surface:#221415;--surface-strong:#2a191b;--surface-soft:#1a1011;--canvas:#140b0c; --input-bg:#1b0e0f;--input-ink:#f2e7e8;--header-bg:#201012; --sidebar-bg:#120809;--sidebar-bg-2:#341417;--sidebar-ink:#f2e7e8;--sidebar-muted:#b29094; --blue:#ef7078;--bluesoft:#3a1519;--shadow:0 12px 34px rgba(0,0,0,.5); --accent:#ef7078;--accent-ink:#2a0508;--accent-strong:#f59aa0;--accent-deep:#a52230;--accent-glow:#f18e97; } /* ── SANDSTONE — tobacco rail on warm sand paper, terracotta accent, outlined nav. * The only design in the set with no grey anywhere: every neutral is warmed. A mid-tone * rail was tried first and cannot work — the mark is a mid-luminance blue, so a mid-tone * rail of ANY hue lands between 1.2:1 and 2.7:1 against it. Hence tobacco, not clay. ── */ html[data-design="sandstone"][data-theme="light"]{ --navy:#5b4326;--navy2:#7a5c3d;--ink:#2a2118;--muted:#6d6152;--line:#ddd2be; --surface:#faf6ee;--surface-strong:#ffffff;--surface-soft:#f2ebdc;--canvas:#efe8d9; --input-bg:#ffffff;--input-ink:#2a2118;--header-bg:#faf6ee; --sidebar-bg:#2b2114;--sidebar-bg-2:#3f3020;--sidebar-ink:#f7f2e9;--sidebar-muted:#bfae94; --blue:#8a5122;--bluesoft:#f6e8d8;--shadow:0 12px 30px rgba(70,52,30,.14); --accent:#8a5122;--accent-ink:#ffffff;--accent-strong:#70411b;--accent-deep:#563214;--accent-glow:#e0a86e; } html[data-design="sandstone"][data-theme="dark"]{ --navy:#f0dcc2;--navy2:#dcc09b;--ink:#f0e8dc;--muted:#b0a493;--line:#413528; --surface:#221c15;--surface-strong:#2a231a;--surface-soft:#1a150f;--canvas:#13100b; --input-bg:#1b1610;--input-ink:#f0e8dc;--header-bg:#1e1811; --sidebar-bg:#191310;--sidebar-bg-2:#2b2114;--sidebar-ink:#f0e8dc;--sidebar-muted:#a89880; --blue:#d9945a;--bluesoft:#3a2a1a;--shadow:0 12px 34px rgba(0,0,0,.5); --accent:#d9945a;--accent-ink:#221205;--accent-strong:#e8b285;--accent-deep:#95592a;--accent-glow:#e0a86e; } /* ── MIDNIGHT OPERATOR — near-black rail, electric indigo, signal green. * * It has a real light appearance, and the round trip to get here is the useful part. It shipped a * "dimmed" light variant; that was then made dark in BOTH appearances so somebody who runs dark * could never be handed a white screen; and it is now a proper pair — dark rail with a light page * in light, dark everywhere in dark. The middle version was the wrong fix for a real worry: the * appearance toggle is already how a person chooses dark, and a design that ignores it does not * protect that choice, it takes it away. * * The rail is near-black in both, and it is a near-black NEUTRAL rather than the navy it was. At * 240° and fully saturated the old rail was still inside the blue family, so the mark could not * sit on it. The indigo lives entirely in the accent now, which is where it was doing the work * anyway. ── */ html[data-design="midnight"][data-theme="light"]{ --navy:#2b2f8f;--navy2:#4046c9;--ink:#17171f;--muted:#5f6172;--line:#dcdce6; --surface:#f7f7fb;--surface-strong:#ffffff;--surface-soft:#ececf5;--canvas:#eeeef5; --input-bg:#ffffff;--input-ink:#17171f;--header-bg:#f7f7fb; --sidebar-bg:#0b0b0d;--sidebar-bg-2:#16161a;--sidebar-ink:#e8e9f5;--sidebar-muted:#8b8ea6; --blue:#4b52d8;--bluesoft:#e4e5fa;--shadow:0 12px 30px rgba(30,30,60,.14); --accent:#4348cf;--accent-ink:#ffffff;--accent-strong:#363bb0;--accent-deep:#2a2e8c;--accent-glow:#2ecc7e; } html[data-design="midnight"][data-theme="dark"]{ --navy:#c9cdfa;--navy2:#a2a8f2;--ink:#e8e9f5;--muted:#84879e;--line:#1e1e26; --surface:#0f0f14;--surface-strong:#16161d;--surface-soft:#0b0b0f;--canvas:#08080a; --input-bg:#0c0c11;--input-ink:#e8e9f5;--header-bg:#0d0d12; --sidebar-bg:#08080a;--sidebar-bg-2:#121216;--sidebar-ink:#e8e9f5;--sidebar-muted:#7a7d93; --blue:#7b83f5;--bluesoft:#17172a;--shadow:0 12px 34px rgba(0,0,0,.6); --accent:#7b83f5;--accent-ink:#0a0b1e;--accent-strong:#a1a7f9;--accent-deep:#3138b8;--accent-glow:#2ecc7e; } /* ── PAPER — black on white and nothing else. No accent colour anywhere, hairline rules * instead of shadows. Its active page is an INVERTED block rather than a coloured one, * which is both the point of the design and the only honest way to show an active state * in a palette that has no colour to spend. ── */ html[data-design="paper"][data-theme="light"]{ --navy:#141414;--navy2:#2e2e2e;--ink:#141414;--muted:#5f5f5f;--line:#d8d8d8; --surface:#ffffff;--surface-strong:#ffffff;--surface-soft:#f4f4f4;--canvas:#f0f0f0; --input-bg:#ffffff;--input-ink:#141414;--header-bg:#ffffff; --sidebar-bg:#ffffff;--sidebar-bg-2:#f4f4f4;--sidebar-ink:#141414;--sidebar-muted:#5f5f5f; --blue:#3d3d3d;--bluesoft:#ececec;--shadow:none; --accent:#1f1f1f;--accent-ink:#ffffff;--accent-strong:#141414;--accent-deep:#000000;--accent-glow:#9a9a9a; } html[data-design="paper"][data-theme="dark"]{ --navy:#f2f2f2;--navy2:#d4d4d4;--ink:#f2f2f2;--muted:#a0a0a0;--line:#333333; --surface:#1f1f1f;--surface-strong:#262626;--surface-soft:#191919;--canvas:#121212; --input-bg:#1a1a1a;--input-ink:#f2f2f2;--header-bg:#1c1c1c; --sidebar-bg:#1a1a1a;--sidebar-bg-2:#262626;--sidebar-ink:#f2f2f2;--sidebar-muted:#9a9a9a; --blue:#c9c9c9;--bluesoft:#2c2c2c;--shadow:none; --accent:#e8e8e8;--accent-ink:#141414;--accent-strong:#f7f7f7;--accent-deep:#c0c0c0;--accent-glow:#6f6f6f; /* Paper is the one design whose --accent-deep is LIGHT in dark mode (a silver, not a navy), so the white that every other design needs on that fill measured 1.82:1 here — the account avatar's initial was all but invisible. --accent-deep-ink defaults to #fff and is overridden only here. Note it is NOT --accent-ink: that one pairs with --accent, and reusing it put eight other dark designs UNDER 4.5:1 when it was tried. tests/test_design_contrast.mjs measures every pair. */ --accent-deep-ink:#141414; } /* ============================================================ * PER-DESIGN UI IDENTITY — each design gets its OWN active-nav motif, so the sidebar (the * most-seen surface in the app) reads as a different product rather than a recolour. * * Seven motifs across nine designs: PILL, BAR, UNDERLINE, FILL, QUIET, OUTLINE, INVERT. * Combined with the radius and depth table near the top of this file, no two designs share * both their motif and their corner language. * * The base state lives in styles.css: background:var(--accent), text var(--accent-ink). * --accent-ink matters here. It was a hardcoded #fff, which was correct while every accent * was a dark navy and wrong the moment one was bright: white on Alpine's dark-mode sky blue * measures 2.6:1. Designs that FILL with the accent depend on that token being right. * ============================================================ */ /* PILL — every link is a rounded pill; the active one fills, flat. Alpine only. * Sapphire used to share this and the two designs became indistinguishable. */ html[data-design="alpine"] .sidebar-link{margin:1px 8px;border-radius:999px;padding-left:12px} html[data-design="alpine"] .sidebar-link.active{border-radius:999px;box-shadow:none} /* FILL — full-bleed square, edge to edge, no left bar. Classic, Claret, Midnight. */ html[data-design="steward-classic"] .sidebar-link,html[data-design="claret"] .sidebar-link, html[data-design="midnight"] .sidebar-link{border-radius:0} html[data-design="steward-classic"] .sidebar-link.active,html[data-design="claret"] .sidebar-link.active, html[data-design="midnight"] .sidebar-link.active{border-radius:0;box-shadow:none} /* UNDERLINE — transparent, with an accent baseline. Editorial. Vintage Ledger. */ html[data-design="ledger"] .sidebar-link.active{ background:transparent;color:var(--sidebar-ink);border-radius:0;box-shadow:inset 0 -2px 0 var(--accent);font-weight:700} html[data-design="ledger"] .sidebar-link.active .sidebar-link-icon{color:var(--accent)} /* QUIET — a low-tint block with a thin accent edge. Evergreen. */ html[data-design="evergreen"] .sidebar-link.active{ background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--sidebar-ink);border-radius:10px;box-shadow:inset 2px 0 0 var(--accent)} html[data-design="evergreen"] .sidebar-link.active .sidebar-link-icon{color:var(--sidebar-ink)} /* BAR — a filled block with a hard left bar in the highlight colour. Sapphire. * The rail is dark and the block is royal blue; the bar is what keeps the two apart. */ html[data-design="sapphire"] .sidebar-link.active{border-radius:8px;box-shadow:inset 4px 0 0 var(--accent-glow)} /* OUTLINE — nothing filled: a ruled box in the accent, with the rail's own ink inside. * Sandstone's terracotta is a light accent, and a filled block in it would need its own text * colour to stay readable; an outline keeps the warmth without that fight. */ html[data-design="sandstone"] .sidebar-link.active{ background:transparent;color:var(--sidebar-ink);border-radius:8px;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} html[data-design="sandstone"] .sidebar-link.active .sidebar-link-icon{color:var(--accent-glow)} /* INVERT — the active page swaps the rail's own two colours. Paper has no accent to spend, * and this is the only honest way to show an active state in a palette that has no colour. */ html[data-design="paper"] .sidebar-link.active{ background:var(--sidebar-ink);color:var(--sidebar-bg);border-radius:5px;box-shadow:none;border-color:transparent} html[data-design="paper"] .sidebar-link.active .sidebar-link-icon{color:var(--sidebar-bg)} /* Nav icon weight tracks the type personality: flat, square designs get a lighter, technical icon. */ html[data-design="paper"] .sidebar-link-icon{font-weight:400;opacity:.9} html[data-design="ledger"] .sidebar-link-icon,html[data-design="alpine"] .sidebar-link-icon, html[data-design="evergreen"] .sidebar-link-icon,html[data-design="sandstone"] .sidebar-link-icon{opacity:.92} /* ---- Design picker UI (Display / Font Settings) ---- */ .design-preview-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)} .design-preview-bar.previewing{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .design-preview-copy{display:grid;gap:2px;min-width:0} .design-preview-copy strong{color:var(--navy);font-size:var(--fs-body)} .design-preview-copy span{color:var(--muted);font-size:var(--fs-small)} .design-preview-actions{display:flex;gap:8px;flex:0 0 auto} .design-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px;margin-top:6px} .design-swatch-card{position:relative;display:grid;gap:10px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface-strong);box-shadow:var(--shadow);cursor:pointer;overflow:hidden;text-align:left;transition:.16s} .design-swatch-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))} .design-swatch-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--shadow)} /* Mini live mockup inside each card (sidebar + content + type specimen + button). */ .design-mini{position:relative;display:flex;height:88px;margin:10px 10px 0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .design-mini-side{width:30%;height:100%} .design-mini-main{position:relative;flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:6px} .design-mini-aa{position:absolute;right:10px;top:7px;font-size:15px;font-weight:700;line-height:1;opacity:.9} .design-mini-bar{height:7px;width:68%;opacity:.9} .design-mini-bar.short{width:44%;opacity:.5} .design-mini-btn{margin-top:auto;width:44px;height:16px} .design-swatch-preview{position:relative;display:flex;height:78px;overflow:hidden} .design-swatch-rail{width:34%;display:flex;flex-direction:column;gap:6px;padding:10px 8px} .design-swatch-rail i{height:6px;border-radius:3px;background:rgba(255,255,255,.24)} .design-swatch-rail i:first-child{width:70%}.design-swatch-rail i:nth-child(2){width:90%}.design-swatch-rail i:nth-child(3){width:55%} .design-swatch-body{position:relative;flex:1;padding:10px 12px} .design-swatch-body b{display:block;width:52%;height:9px;border-radius:3px;margin-bottom:8px} .design-swatch-body em{display:block;width:78%;height:6px;border-radius:3px;opacity:.55;margin-bottom:6px} .design-swatch-body span{position:absolute;right:10px;bottom:9px;width:34px;height:16px;border-radius:5px} .design-swatch-meta{display:grid;gap:2px;padding:2px 14px 14px} .design-swatch-meta strong{color:var(--navy);font-size:var(--fs-body);letter-spacing:-.01em} .design-swatch-meta small{color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)} .design-swatch-card[aria-pressed="true"] .design-swatch-meta strong:after{content:"✓ Active";margin-left:8px;color:var(--accent);font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;vertical-align:middle} @media(max-width:640px){.design-theme-grid{grid-template-columns:1fr}}