/* ========================================================================== Draco Staff Development — v8 Themes (colour palettes) Each user picks a palette (data-palette on ) + a mode (data-theme). A palette recolours the brand family (header, primary buttons, accents, links, focus ring) AND washes the shell surfaces -- page background, sidebar, panels -- with a faint tint of its own hue, so switching palettes recolours the whole app rather than only the topbar. The --bg / --surface / --surface-2 / --surface-3 / --border / --border-strong / --app-footer-bg values below are GENERATED, not hand-picked. Each is the token's neutral base blended toward that palette's --brand-navy and then re-solved to a target WCAG relative luminance. Because contrast depends only on luminance, fixing the luminance fixes the contrast: - dark mode reproduces the shipped luminance exactly (drift < 1e-3), so every text/link ratio is byte-for-byte what it was before; - light mode takes a small, measured luminance drop (sRGB has almost no chroma available above L=0.88, so an exactly-luminance-preserving tint is invisible there). The drop is bounded by --text-3, the binding foreground. Verified: 20 palettes x {light,dark} x 19 text/link pairs = 760 measurements, 0 below WCAG AA 4.5:1. Regenerate with tools/gen-palette-surfaces.py. Do not hand-edit the generated lines -- change the targets in the generator and re-run, or the depth order (bg darkest -> surface lightest in light mode, inverted in dark) and the contrast guarantees will drift apart. ========================================================================== */ /* Primary buttons follow the palette navy so they recolour automatically. */ /* `.btn--primary` USED TO BE MAPPED HERE and it never took effect — this file loads BEFORE components.css and the selectors have equal specificity, so components.css's literal navy won on every palette. The mapping now lives in components.css, where nothing overrides it. Do not re-add a `.btn--*` rule to this file: it will lose the same way. Palettes influence buttons by redefining the --brand-navy-* ramp below, which is what the buttons now read. */ .stat__icon--navy { color: var(--brand-navy); } /* ---- Corporate — THE PLATFORM DEFAULT ------------------------------------------------------ Clean, cool-white surfaces with professional slate-navy chrome and a confident blue accent. Light-first: every signed-out visitor and every brand-new account sees this until they sign in and choose otherwise. Hand-tuned (not generator-output) to well-known AA-safe slate/blue values; contrast verified in-browser. If you regenerate the palette surfaces, add corporate to the generator rather than letting it drift from these. */ :root[data-palette="corporate"] { --header-bg:#1e293b; --brand-navy:#1e293b; --brand-navy-700:#273549; --brand-navy-800:#172032; --brand-navy-900:#111827; --brand-navy-950:#0b111d; --brand-sky:#3b82f6; --brand-sky-bright:#60a5fa; --brand-blue:#2563eb; --link:#2563eb; --link-hover:#1d4ed8; --ring:rgba(59,130,246,.5); --bg:#eef2f7; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9; --border:#e2e8f0; --border-strong:#cbd5e1; --app-footer-bg:#eef2f7; } :root[data-palette="corporate"][data-theme="dark"] { --header-bg:#0f172a; --link:#93c5fd; --link-hover:#bfdbfe; --bg:#0b1120; --surface:#111a2e; --surface-2:#16223a; --surface-3:#1d2b47; --border:#243352; --border-strong:#334467; --app-footer-bg:#0b1526; } /* ---- Draco — deep navy & sky ---- */ :root[data-palette="draco"] { --header-bg:#1e3a5f; --brand-navy:#1e3a5f; --brand-navy-700:#24466e; --brand-navy-800:#16304f; --brand-navy-900:#112741; --brand-navy-950:#0b1b2e; --brand-sky:#5b9bd5; --brand-sky-bright:#7db4e6; --brand-blue:#4a7fb8; --link:#2d5a87; --link-hover:#1e3a5f; --ring:rgba(91,155,213,.55); --bg:#e9ecee; --surface:#f6f8f8; --surface-2:#f2f3f4; --surface-3:#ecf0f1; --border:#dce0e5; --border-strong:#c4ccd5; --app-footer-bg:#e0e3e9; } :root[data-palette="draco"][data-theme="dark"] { --header-bg:#0d1a2c; --link:#7db4e6; --link-hover:#a9cef0; --bg:#0b1220; --surface:#0e1d2e; --surface-2:#142239; --surface-3:#192b47; --border:#1e3455; --border-strong:#2e4567; --app-footer-bg:#0b1826; } /* ---- Midnight — indigo-blue ---- */ :root[data-palette="midnight"] { --header-bg:#1c2b52; --brand-navy:#1c2b52; --brand-navy-700:#243668; --brand-navy-800:#172244; --brand-navy-900:#111a36; --brand-navy-950:#0b1226; --brand-sky:#6d8cf0; --brand-sky-bright:#93a9f6; --brand-blue:#4f6fd6; --link:#3a51b0; --link-hover:#25336e; --ring:rgba(109,140,240,.5); --bg:#e9ecee; --surface:#f6f8f8; --surface-2:#f2f3f4; --surface-3:#efeff2; --border:#dce0e5; --border-strong:#c7cbd6; --app-footer-bg:#e0e3e9; } :root[data-palette="midnight"][data-theme="dark"] { --header-bg:#0c1226; --link:#93a9f6; --link-hover:#c0ccf9; --bg:#0b1220; --surface:#131b34; --surface-2:#15213e; --surface-3:#1b2a4b; --border:#233356; --border-strong:#354464; --app-footer-bg:#0d1729; } /* ---- Ocean — teal & cyan ---- */ :root[data-palette="ocean"] { --header-bg:#0e4a5a; --brand-navy:#0e4a5a; --brand-navy-700:#125e72; --brand-navy-800:#0b3b48; --brand-navy-900:#082d38; --brand-navy-950:#051f27; --brand-sky:#22b8cf; --brand-sky-bright:#5fd3e0; --brand-blue:#1593a8; --link:#0e738f; --link-hover:#0b3b48; --ring:rgba(34,184,207,.5); --bg:#e6eded; --surface:#f6f8f8; --surface-2:#f1f3f6; --surface-3:#ecf0f1; --border:#d9e1e3; --border-strong:#beced2; --app-footer-bg:#dde4e7; } :root[data-palette="ocean"][data-theme="dark"] { --header-bg:#06222b; --link:#5fd3e0; --link-hover:#a9e8f0; --bg:#05141a; --surface:#071f26; --surface-2:#0a252f; --surface-3:#0c2f3a; --border:#113846; --border-strong:#184a5b; --app-footer-bg:#071921; } /* ---- Forest — deep green ---- */ :root[data-palette="forest"] { --header-bg:#1b4635; --brand-navy:#1b4635; --brand-navy-700:#245a44; --brand-navy-800:#153a2b; --brand-navy-900:#102c21; --brand-navy-950:#0a1e17; --brand-sky:#34c98a; --brand-sky-bright:#5fd9a5; --brand-blue:#1f9e6c; --link:#137951; --link-hover:#0f5c3e; --ring:rgba(52,201,138,.5); --bg:#e7edea; --surface:#f6f8f8; --surface-2:#f2f3f3; --surface-3:#edf0ee; --border:#dbe1de; --border-strong:#c1ceca; --app-footer-bg:#dfe4e2; } :root[data-palette="forest"][data-theme="dark"] { --header-bg:#0a1e17; --link:#5fd9a5; --link-hover:#9fe9c8; --bg:#091412; --surface:#0e1f1c; --surface-2:#0f2620; --surface-3:#162f2b; --border:#1b3932; --border-strong:#284a45; --app-footer-bg:#0a1a16; } /* ---- Slate — refined neutral gray ---- */ :root[data-palette="slate"] { --header-bg:#334155; --brand-navy:#334155; --brand-navy-700:#3f4d63; --brand-navy-800:#293445; --brand-navy-900:#1f2836; --brand-navy-950:#151b25; --brand-sky:#7f95b0; --brand-sky-bright:#a3b4cb; --brand-blue:#5f7593; --link:#4a5a72; --link-hover:#334155; --ring:rgba(127,149,176,.5); --bg:#e9ecee; --surface:#f6f8f8; --surface-2:#f2f3f4; --surface-3:#efeff2; --border:#dde0e2; --border-strong:#c9cbd1; --app-footer-bg:#e1e3e6; } :root[data-palette="slate"][data-theme="dark"] { --header-bg:#151b25; --link:#a3b4cb; --link-hover:#c8d3e0; --bg:#0f121a; --surface:#151d25; --surface-2:#19232d; --surface-3:#222b3c; --border:#293447; --border-strong:#384559; --app-footer-bg:#131721; } /* ---- Indigo — violet-blue ---- */ :root[data-palette="indigo"] { --header-bg:#312e73; --brand-navy:#312e73; --brand-navy-700:#3d3a8a; --brand-navy-800:#28265d; --brand-navy-900:#1f1d49; --brand-navy-950:#151333; --brand-sky:#8b8cf0; --brand-sky-bright:#adaef6; --brand-blue:#6a6bd6; --link:#4f4fb5; --link-hover:#34327e; --ring:rgba(139,140,240,.5); --bg:#ebebf2; --surface:#f8f7fb; --surface-2:#f4f2f8; --surface-3:#eeeff5; --border:#dedfe9; --border-strong:#c9cada; --app-footer-bg:#e2e2ed; } :root[data-palette="indigo"][data-theme="dark"] { --header-bg:#151333; --link:#adaef6; --link-hover:#cfd0fa; --bg:#110f27; --surface:#19183a; --surface-2:#1c1e44; --surface-3:#242654; --border:#2b2e64; --border-strong:#3c3f76; --app-footer-bg:#131431; } /* ---- Plum — rich purple ---- */ :root[data-palette="plum"] { --header-bg:#4a2c5e; --brand-navy:#4a2c5e; --brand-navy-700:#5c3873; --brand-navy-800:#3b234b; --brand-navy-900:#2d1b3a; --brand-navy-950:#1f1228; --brand-sky:#c07ee6; --brand-sky-bright:#d3a2ef; --brand-blue:#a35fd0; --link:#8a3fb5; --link-hover:#5c3873; --ring:rgba(192,126,230,.5); --bg:#ecebef; --surface:#f9f7f9; --surface-2:#f5f2f5; --surface-3:#f2eef3; --border:#e2dee7; --border-strong:#d1c8d6; --app-footer-bg:#e7e1e8; } :root[data-palette="plum"][data-theme="dark"] { --header-bg:#1f1228; --link:#d3a2ef; --link-hover:#e7cbf6; --bg:#180e1f; --surface:#221730; --surface-2:#291c39; --surface-3:#322447; --border:#3e2b54; --border-strong:#4e3c66; --app-footer-bg:#1c1327; } /* ---- Bordeaux — deep wine ---- */ :root[data-palette="bordeaux"] { --header-bg:#5c2434; --brand-navy:#5c2434; --brand-navy-700:#722d41; --brand-navy-800:#4a1c2a; --brand-navy-900:#391520; --brand-navy-950:#280e16; --brand-sky:#e5738b; --brand-sky-bright:#ef9aab; --brand-blue:#c85068; --link:#a83a51; --link-hover:#722d41; --ring:rgba(229,115,139,.5); --bg:#f0eaed; --surface:#f9f7f9; --surface-2:#f6f2f2; --surface-3:#f3eef0; --border:#e7dde1; --border-strong:#d7c7cd; --app-footer-bg:#e9e1e2; } :root[data-palette="bordeaux"][data-theme="dark"] { --header-bg:#280e16; --link:#ef9aab; --link-hover:#f6c4ce; --bg:#1e0d12; --surface:#2c151e; --surface-2:#351926; --surface-3:#42202f; --border:#4d2839; --border-strong:#5e394b; --app-footer-bg:#251118; } /* ---- Espresso — warm brown ---- */ :root[data-palette="espresso"] { --header-bg:#463527; --brand-navy:#463527; --brand-navy-700:#584434; --brand-navy-800:#382a1e; --brand-navy-900:#2b2017; --brand-navy-950:#1d150f; --brand-sky:#c69c6d; --brand-sky-bright:#dbb98f; --brand-blue:#a87f4f; --link:#876435; --link-hover:#584434; --ring:rgba(198,156,109,.5); --bg:#eeebe9; --surface:#f9f7f8; --surface-2:#f3f3f1; --surface-3:#f0efef; --border:#e2dfdd; --border-strong:#d0cac6; --app-footer-bg:#e6e2e1; } :root[data-palette="espresso"][data-theme="dark"] { --header-bg:#1d150f; --link:#dbb98f; --link-hover:#ecd6b8; --bg:#161110; --surface:#211b16; --surface-2:#26211e; --surface-3:#322925; --border:#3a322f; --border-strong:#4a433e; --app-footer-bg:#1b1614; } /* ---- Graphite — near-black monochrome ---- */ :root[data-palette="graphite"] { --header-bg:#262b31; --brand-navy:#262b31; --brand-navy-700:#333941; --brand-navy-800:#1e2227; --brand-navy-900:#171a1e; --brand-navy-950:#101215; --brand-sky:#9aa4b0; --brand-sky-bright:#bcc4cd; --brand-blue:#78828f; --link:#556070; --link-hover:#333941; --ring:rgba(154,164,176,.5); --bg:#eaeceb; --surface:#f6f8f8; --surface-2:#f2f3f4; --surface-3:#f0efef; --border:#dee0df; --border-strong:#cacbce; --app-footer-bg:#e2e3e3; } :root[data-palette="graphite"][data-theme="dark"] { --header-bg:#101215; --link:#bcc4cd; --link-hover:#dbe0e6; --bg:#111216; --surface:#191c24; --surface-2:#1e222b; --surface-3:#252b37; --border:#2e343e; --border-strong:#3d454f; --app-footer-bg:#15171d; } /* ---- Amber — warm gold ---- */ :root[data-palette="amber"] { --header-bg:#5a4413; --brand-navy:#5a4413; --brand-navy-700:#70561b; --brand-navy-800:#48370f; --brand-navy-900:#382b0c; --brand-navy-950:#261d08; --brand-sky:#e6a935; --brand-sky-bright:#f0c164; --brand-blue:#c98e26; --link:#8e6116; --link-hover:#70561b; --ring:rgba(230,169,53,.5); --bg:#efebe6; --surface:#f7f8f5; --surface-2:#f3f3f1; --surface-3:#f1efec; --border:#e4dfd7; --border-strong:#d0cbbc; --app-footer-bg:#e5e3da; } :root[data-palette="amber"][data-theme="dark"] { --header-bg:#261d08; --link:#f0c164; --link-hover:#f6d99a; --bg:#151207; --surface:#231b0b; --surface-2:#29210f; --surface-3:#322a16; --border:#3e321b; --border-strong:#4f4325; --app-footer-bg:#1d160b; } /* ---- Rose — soft magenta ---- */ :root[data-palette="rose"] { --header-bg:#6e2545; --brand-navy:#6e2545; --brand-navy-700:#872e56; --brand-navy-800:#591d38; --brand-navy-900:#45162b; --brand-navy-950:#300f1e; --brand-sky:#f072a6; --brand-sky-bright:#f59cc0; --brand-blue:#d1508a; --link:#b23a71; --link-hover:#872e56; --ring:rgba(240,114,166,.5); --bg:#f0eaed; --surface:#f9f7f9; --surface-2:#f5f2f5; --surface-3:#f3eef0; --border:#e7dde2; --border-strong:#d9c6d0; --app-footer-bg:#ebe0e5; } :root[data-palette="rose"][data-theme="dark"] { --header-bg:#300f1e; --link:#f59cc0; --link-hover:#f9c6da; --bg:#200b17; --surface:#2e1323; --surface-2:#37172a; --surface-3:#441e33; --border:#50253f; --border-strong:#653451; --app-footer-bg:#270f1d; } /* ---- Cobalt — bright saturated blue ---- */ :root[data-palette="cobalt"] { --header-bg:#1e40af; --brand-navy:#1e40af; --brand-navy-700:#2549c9; --brand-navy-800:#1b3899; --brand-navy-900:#172e7a; --brand-navy-950:#101f54; --brand-sky:#3b82f6; --brand-sky-bright:#7aa7fa; --brand-blue:#2563eb; --link:#1d4ed8; --link-hover:#1e3a8a; --ring:rgba(59,130,246,.5); --bg:#e9ebf8; --surface:#f5f8fb; --surface-2:#f0f3fa; --surface-3:#edeff8; --border:#dbdff1; --border-strong:#c0cbe8; --app-footer-bg:#dfe2f4; } :root[data-palette="cobalt"][data-theme="dark"] { --header-bg:#0c1638; --link:#7aa7fa; --link-hover:#b3c9fc; --bg:#09102c; --surface:#0c1942; --surface-2:#0f1e4f; --surface-3:#142661; --border:#182e73; --border-strong:#213e91; --app-footer-bg:#091536; } /* ---- Sky — clear cyan-blue ---- */ :root[data-palette="sky"] { --header-bg:#075985; --brand-navy:#075985; --brand-navy-700:#0a6ba0; --brand-navy-800:#064a6e; --brand-navy-900:#053a56; --brand-navy-950:#03283b; --brand-sky:#38bdf8; --brand-sky-bright:#7dd3fc; --brand-blue:#0ea5e9; --link:#0369a1; --link-hover:#075985; --ring:rgba(56,189,248,.5); --bg:#e4edf2; --surface:#f5f8fb; --surface-2:#edf4f8; --surface-3:#e8f1f3; --border:#d3e2ea; --border-strong:#b6cfdc; --app-footer-bg:#d8e5eb; } :root[data-palette="sky"][data-theme="dark"] { --header-bg:#04222f; --link:#7dd3fc; --link-hover:#bae6fd; --bg:#03141d; --surface:#051e2f; --surface-2:#062438; --surface-3:#072e43; --border:#0a3751; --border-strong:#11486b; --app-footer-bg:#041926; } /* ---- Teal — deep teal ---- */ :root[data-palette="teal"] { --header-bg:#0f5c52; --brand-navy:#0f5c52; --brand-navy-700:#147065; --brand-navy-800:#0c4a42; --brand-navy-900:#093932; --brand-navy-950:#052722; --brand-sky:#14b8a6; --brand-sky-bright:#5eded0; --brand-blue:#0d9488; --link:#0f766e; --link-hover:#115e57; --ring:rgba(20,184,166,.5); --bg:#e6eded; --surface:#f6f8f8; --surface-2:#eff4f3; --surface-3:#e9f1f0; --border:#d6e2e2; --border-strong:#b8d0cd; --app-footer-bg:#dae5e5; } :root[data-palette="teal"][data-theme="dark"] { --header-bg:#04211d; --link:#5eded0; --link-hover:#a3ede4; --bg:#041513; --surface:#06201e; --surface-2:#092626; --surface-3:#0c302f; --border:#0e3a38; --border-strong:#144c4a; --app-footer-bg:#061a1a; } /* ---- Emerald — vivid green ---- */ :root[data-palette="emerald"] { --header-bg:#065f46; --brand-navy:#065f46; --brand-navy-700:#0a7554; --brand-navy-800:#054d39; --brand-navy-900:#043c2d; --brand-navy-950:#02271e; --brand-sky:#10b981; --brand-sky-bright:#4fd6a4; --brand-blue:#059669; --link:#047857; --link-hover:#065f46; --ring:rgba(16,185,129,.5); --bg:#e3eeeb; --surface:#f6f8f8; --surface-2:#eff4f3; --surface-3:#e9f1f0; --border:#d3e3e0; --border-strong:#b6d1c8; --app-footer-bg:#d8e6e1; } :root[data-palette="emerald"][data-theme="dark"] { --header-bg:#032018; --link:#4fd6a4; --link-hover:#9fe8cf; --bg:#031512; --surface:#03211a; --surface-2:#052721; --surface-3:#063129; --border:#093b31; --border-strong:#104d42; --app-footer-bg:#021b17; } /* ---- Violet — rich violet ---- */ :root[data-palette="violet"] { --header-bg:#4c2a85; --brand-navy:#4c2a85; --brand-navy-700:#5b3399; --brand-navy-800:#3f2270; --brand-navy-900:#321b59; --brand-navy-950:#22123d; --brand-sky:#a78bfa; --brand-sky-bright:#c4b5fd; --brand-blue:#8b5cf6; --link:#7c3aed; --link-hover:#6d28d9; --ring:rgba(167,139,250,.5); --bg:#eeeaf3; --surface:#f9f7f9; --surface-2:#f4f2f8; --surface-3:#f1eef6; --border:#e3dded; --border-strong:#d1c7df; --app-footer-bg:#e5e1ed; } :root[data-palette="violet"][data-theme="dark"] { --header-bg:#1c1233; --link:#c4b5fd; --link-hover:#ddd6fe; --bg:#170d26; --surface:#22143c; --surface-2:#261a46; --surface-3:#322057; --border:#3a276a; --border-strong:#4b3781; --app-footer-bg:#1a1133; } /* ---- Fuchsia — magenta ---- */ :root[data-palette="fuchsia"] { --header-bg:#86198f; --brand-navy:#86198f; --brand-navy-700:#9d21a8; --brand-navy-800:#701478; --brand-navy-900:#5b0f61; --brand-navy-950:#3f0a43; --brand-sky:#e879f9; --brand-sky-bright:#f0abfc; --brand-blue:#d946ef; --link:#b123c2; --link-hover:#a21caf; --ring:rgba(232,121,249,.5); --bg:#f4e8f4; --surface:#fbf6fc; --surface-2:#f7f1f9; --surface-3:#f4edf7; --border:#ecdaee; --border-strong:#dfc2e1; --app-footer-bg:#eedeef; } :root[data-palette="fuchsia"][data-theme="dark"] { --header-bg:#2c0a30; --link:#f0abfc; --link-hover:#f5d0fe; --bg:#200824; --surface:#300c37; --surface-2:#381041; --surface-3:#461451; --border:#551760; --border-strong:#6c227d; --app-footer-bg:#270b2d; } /* ---- Crimson — vivid red ---- */ :root[data-palette="crimson"] { --header-bg:#7f1d2e; --brand-navy:#7f1d2e; --brand-navy-700:#9a2438; --brand-navy-800:#6a1626; --brand-navy-900:#55111e; --brand-navy-950:#3a0b14; --brand-sky:#f43f5e; --brand-sky-bright:#fb7185; --brand-blue:#e11d48; --link:#be123c; --link-hover:#9f1239; --ring:rgba(244,63,94,.5); --bg:#f4e9eb; --surface:#faf7f6; --surface-2:#f6f2f2; --surface-3:#f6edf0; --border:#ebdcdf; --border-strong:#dec5ca; --app-footer-bg:#ece0e2; } :root[data-palette="crimson"][data-theme="dark"] { --header-bg:#2c0a11; --link:#fb7185; --link-hover:#fda4b0; --bg:#240910; --surface:#341018; --surface-2:#3e131f; --surface-3:#4e1825; --border:#5c1e2e; --border-strong:#722d3f; --app-footer-bg:#2b0d15; } /* ---- Copper — warm bronze ---- */ :root[data-palette="copper"] { --header-bg:#6b3410; --brand-navy:#6b3410; --brand-navy-700:#7f3f16; --brand-navy-800:#5a2b0c; --brand-navy-900:#472109; --brand-navy-950:#2f1606; --brand-sky:#e08c4a; --brand-sky-bright:#eaa970; --brand-blue:#c9752f; --link:#9e5820; --link-hover:#7f3f16; --ring:rgba(224,140,74,.5); --bg:#efebe6; --surface:#faf7f6; --surface-2:#f7f2ef; --surface-3:#f4eeed; --border:#e7ded8; --border-strong:#d8c8c0; --app-footer-bg:#e8e2db; } :root[data-palette="copper"][data-theme="dark"] { --header-bg:#1e1206; --link:#eaa970; --link-hover:#f2c79e; --bg:#1c0f08; --surface:#2a180b; --surface-2:#341c0e; --surface-3:#402414; --border:#4d2b1b; --border-strong:#5f3c27; --app-footer-bg:#241308; } /* ========================================================================== TRUE MONOCHROME PALETTES (#253) Every value here is a pure neutral — R=G=B — so nothing on screen carries a hue except the user's accent and the status families (which must stay coloured: success/danger/warning are meaning, not decoration). Requested as "black/white/monochromatic grey" alongside the twenty hued palettes, which all tint their surfaces. ========================================================================== */ /* ---- Monochrome — neutral grey chrome ---- */ :root[data-palette="mono"] { --header-bg:#3f3f46; --brand-navy:#3f3f46; --brand-navy-700:#52525b; --brand-navy-800:#333338; --brand-navy-900:#27272a; --brand-navy-950:#18181b; --brand-sky:#a1a1aa; --brand-sky-bright:#d4d4d8; --brand-blue:#71717a; --link:#3f3f46; --link-hover:#18181b; --ring:rgba(113,113,122,.5); --bg:#ececee; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#e9e9eb; --border:#dcdcdf; --border-strong:#bcbcc2; --app-footer-bg:#e4e4e7; } :root[data-palette="mono"][data-theme="dark"] { --header-bg:#18181b; --link:#d4d4d8; --link-hover:#fafafa; --bg:#0c0c0d; --surface:#161618; --surface-2:#1c1c1f; --surface-3:#242427; --border:#2e2e33; --border-strong:#414147; --app-footer-bg:#131315; } /* ---- Noir — near-black chrome, white text, for the heavy look ---- */ :root[data-palette="noir"] { --header-bg:#0a0a0a; --brand-navy:#0a0a0a; --brand-navy-700:#1f1f1f; --brand-navy-800:#070707; --brand-navy-900:#050505; --brand-navy-950:#000000; --brand-sky:#8a8a8a; --brand-sky-bright:#c4c4c4; --brand-blue:#5f5f5f; --link:#171717; --link-hover:#000000; --ring:rgba(120,120,120,.5); --bg:#e8e8e8; --surface:#ffffff; --surface-2:#f2f2f2; --surface-3:#e6e6e6; --border:#d6d6d6; --border-strong:#b4b4b4; --app-footer-bg:#dedede; } :root[data-palette="noir"][data-theme="dark"] { --header-bg:#000000; --link:#d0d0d0; --link-hover:#ffffff; --bg:#050505; --surface:#0f0f0f; --surface-2:#151515; --surface-3:#1c1c1c; --border:#282828; --border-strong:#3a3a3a; --app-footer-bg:#0a0a0a; } /* ---- Paper — the lightest neutral; near-white chrome with black text ---- */ :root[data-palette="paper"] { --header-bg:#52525b; --brand-navy:#52525b; --brand-navy-700:#63636d; --brand-navy-800:#3f3f46; --brand-navy-900:#333338; --brand-navy-950:#27272a; --brand-sky:#b4b4bb; --brand-sky-bright:#dcdce0; --brand-blue:#83838d; --link:#3f3f46; --link-hover:#18181b; --ring:rgba(130,130,140,.45); --bg:#f7f7f8; --surface:#ffffff; --surface-2:#fafafa; --surface-3:#f2f2f3; --border:#e6e6e8; --border-strong:#c9c9cf; --app-footer-bg:#f0f0f2; } :root[data-palette="paper"][data-theme="dark"] { --header-bg:#27272a; --link:#dcdce0; --link-hover:#ffffff; --bg:#111113; --surface:#1a1a1d; --surface-2:#202024; --surface-3:#28282d; --border:#33333a; --border-strong:#47474f; --app-footer-bg:#161619; } /* ========================================================================== THEME STYLE SHAPES (#253) A palette carries COLOUR; a style carries SHAPE and WEIGHT — the part a palette cannot express. Applied as :root[data-style="…"] alongside data-palette and data-theme, so the three compose rather than compete. Only tokens are set here: no component is targeted, so a style can never break a layout, only re-shape it. ========================================================================== */ /* Gothic — sharp, heavy, unornamented. Near-square corners and flat shadows. */ :root[data-style="gothic"] { /* NO RADIUS OVERRIDES (owner, 2026-07-21). Gothic used to force 2px corners platform-wide; it now inherits the default scale from tokens.css (6/10/14/20) exactly like every other style. Gothic is carried by WEIGHT, COLOUR and the hard-edged shadow below — not by squaring off every corner in the product. Do not re-add --radius-* here. */ --fw-regular: 400; --fw-medium: 600; --fw-semibold: 700; --fw-bold: 800; --fw-extra: 900; /* Hard-edged shadows rather than soft blooms — a diffuse glow reads as friendly, which is the opposite of what this style is for. TINTED, NOT PURE BLACK, and softened at the small end (8.220.1). At rgba(0,0,0,.5) a 36px button carried a solid black 1px rule along its bottom edge: on a pale ghost button that reads as a printing artefact rather than a raised edge, and it was the loudest thing about every button on the page. Ink-blue at a lower alpha keeps the hard edge this style exists for while letting the button, not its shadow, be what you look at. */ --shadow-sm: 0 1px 0 rgba(9,13,20,.30); --shadow: 0 2px 0 rgba(9,13,20,.30); --shadow-md: 0 3px 0 rgba(9,13,20,.28); --shadow-lg: 0 4px 0 rgba(9,13,20,.26); } /* Soft — generous radii and gentle shadows. Used by Ocean and Summer. */ :root[data-style="soft"] { --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --shadow-sm: 0 2px 6px rgba(15,40,60,.08); --shadow: 0 4px 14px rgba(15,40,60,.10); --shadow-md: 0 8px 22px rgba(15,40,60,.12); --shadow-lg: 0 14px 34px rgba(15,40,60,.14); } /* Corporate — tight radii, quiet shadows, nothing decorative. */ :root[data-style="corporate"] { --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow: 0 1px 3px rgba(16,24,40,.08); --shadow-md: 0 2px 6px rgba(16,24,40,.08); --shadow-lg: 0 4px 12px rgba(16,24,40,.10); }