/*! * fleet-theme v1 token contract. * Tokens: --bg --surface --elevated --border --text --muted --faint --accent --accent-strong * --line --radius --focus --ok --warn --crit * Every color token also has an RGB-channel twin (for example --bg-rgb: 20 23 26) so * Tailwind and rgba() callers can apply alpha: rgb(var(--bg-rgb) / 0.5). * The :root block below holds the registry default so pages paint sensibly before any script runs; * it is skipped when (the kill switch) so a site's old tokens win. * Base styles are scoped under .fleet-theme-base and do nothing unless a page opts in. */ /* @default-tokens:start (generated by tools/build.js from themes.json) */ :root:not([data-fleet-theme="off"]) { --bg: #14171a; --bg-rgb: 20 23 26; --surface: #1c2024; --surface-rgb: 28 32 36; --elevated: #1f2429; --elevated-rgb: 31 36 41; --border: #2e353d; --border-rgb: 46 53 61; --text: #ccd2db; --text-rgb: 204 210 219; --muted: #8b949e; --muted-rgb: 139 148 158; --faint: #656d76; --faint-rgb: 101 109 118; --accent: #94a3b8; --accent-rgb: 148 163 184; --accent-strong: #64748b; --accent-strong-rgb: 100 116 139; --line: #8b949e; --line-rgb: 139 148 158; --ok: #6fcf97; --ok-rgb: 111 207 151; --warn: #e5c07b; --warn-rgb: 229 192 123; --crit: #f28b82; --crit-rgb: 242 139 130; --focus: #94a3b8; --focus-rgb: 148 163 184; --radius: 8px; color-scheme: dark; } /* @default-tokens:end */ .fleet-theme-base { background: var(--bg); color: var(--text); font-family: var(--font-family); font-size: 17px; line-height: 1.65; } /* Universal Typography and Accommodation Variables */ :root:not([data-fleet-theme="off"]) { --font-family-atkinson: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-opendyslexic: "OpenDyslexic", "Atkinson Hyperlegible", sans-serif; --font-family-lexend: "Lexend", "Atkinson Hyperlegible", sans-serif; --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; --font-family: var(--font-family-atkinson); --font-sans: var(--font-family-atkinson); --font-mono: var(--font-family-mono); } :root[data-fleet-font="atkinson"] { --font-family: var(--font-family-atkinson); } :root[data-fleet-font="opendyslexic"], :root[data-fleet-font="dyslexic"] { --font-family: var(--font-family-opendyslexic); } :root[data-fleet-font="lexend"] { --font-family: var(--font-family-lexend); } :root[data-fleet-font="mono"], :root[data-fleet-font="monospace"] { --font-family: var(--font-family-mono); } /* Colorblind Accommodations */ :root[data-fleet-colorblind="deuteranopia"] { --ok: #56b4e9; --ok-rgb: 86 180 233; --warn: #e69f00; --warn-rgb: 230 159 0; --crit: #d55e00; --crit-rgb: 213 94 0; --accent: #0072b2; --accent-rgb: 0 114 178; --accent-strong: #009e73; --accent-strong-rgb: 0 158 115; } :root[data-fleet-colorblind="protanopia"] { --ok: #56b4e9; --ok-rgb: 86 180 233; --warn: #f0e442; --warn-rgb: 240 228 66; --crit: #cc79a7; --crit-rgb: 204 121 167; --accent: #0072b2; --accent-rgb: 0 114 178; --accent-strong: #56b4e9; --accent-strong-rgb: 86 180 233; } :root[data-fleet-colorblind="tritanopia"] { --ok: #009e73; --ok-rgb: 0 158 115; --warn: #cc79a7; --warn-rgb: 204 121 167; --crit: #d55e00; --crit-rgb: 213 94 0; --accent: #d55e00; --accent-rgb: 213 94 0; --accent-strong: #009e73; --accent-strong-rgb: 0 158 115; } /* High Contrast (WCAG AAA) */ :root[data-fleet-colorblind="high-contrast"]:not([data-fleet-theme-scheme="light"]), :root[data-fleet-contrast="high"]:not([data-fleet-theme-scheme="light"]) { --bg: #000000; --bg-rgb: 0 0 0; --surface: #0a0a0a; --surface-rgb: 10 10 10; --elevated: #141414; --elevated-rgb: 20 20 20; --border: #ffffff; --border-rgb: 255 255 255; --text: #ffffff; --text-rgb: 255 255 255; --muted: #e0e0e0; --muted-rgb: 224 224 224; --faint: #cccccc; --faint-rgb: 204 204 204; --accent: #ffff00; --accent-rgb: 255 255 0; --accent-strong: #00ffff; --accent-strong-rgb: 0 255 255; --line: #ffffff; --line-rgb: 255 255 255; --ok: #00ff66; --ok-rgb: 0 255 102; --warn: #ffff00; --warn-rgb: 255 255 0; --crit: #ff3333; --crit-rgb: 255 51 51; --focus: #ffff00; --focus-rgb: 255 255 0; } :root[data-fleet-colorblind="high-contrast"][data-fleet-theme-scheme="light"], :root[data-fleet-contrast="high"][data-fleet-theme-scheme="light"] { --bg: #ffffff; --bg-rgb: 255 255 255; --surface: #f5f5f5; --surface-rgb: 245 245 245; --elevated: #eeeeee; --elevated-rgb: 238 238 238; --border: #000000; --border-rgb: 0 0 0; --text: #000000; --text-rgb: 0 0 0; --muted: #1a1a1a; --muted-rgb: 26 26 26; --faint: #333333; --faint-rgb: 51 51 51; --accent: #0000cc; --accent-rgb: 0 0 204; --accent-strong: #000066; --accent-strong-rgb: 0 0 102; --line: #000000; --line-rgb: 0 0 0; --ok: #006600; --ok-rgb: 0 102 0; --warn: #8a4500; --warn-rgb: 138 69 0; --crit: #990000; --crit-rgb: 153 0 0; --focus: #0000cc; --focus-rgb: 0 0 204; } /* Sensory Accommodations */ :root[data-fleet-motion="reduced"] *, :root[data-fleet-motion="reduced"] *::before, :root[data-fleet-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-fleet-motion="normal"]) *, :root:not([data-fleet-motion="normal"]) *::before, :root:not([data-fleet-motion="normal"]) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } :root[data-fleet-glare="reduced"] { filter: sepia(0.25) saturate(0.85) brightness(0.95); } .fleet-theme-base h1, .fleet-theme-base h2, .fleet-theme-base h3 { line-height: 1.25; text-wrap: balance; } .fleet-theme-base h2 { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--line); } .fleet-theme-base h3 { color: var(--accent); } .fleet-theme-base a { color: var(--accent); text-underline-offset: 2px; } .fleet-theme-base a:hover { color: var(--accent-strong); } .fleet-theme-base small, .fleet-theme-base .muted { color: var(--muted); } .fleet-theme-base code { background: var(--surface); padding: 1px 5px; border-radius: calc(var(--radius) / 2); font-family: var(--font-mono); font-size: 0.92em; overflow-wrap: anywhere; } .fleet-theme-base pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; overflow-x: auto; } .fleet-theme-base pre code { padding: 0; background: transparent; font-family: var(--font-mono); } .fleet-theme-base table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; } .fleet-theme-base th, .fleet-theme-base td { border: 1px solid var(--border); padding: 6px 8px; vertical-align: top; } .fleet-theme-base th { background: var(--surface); } .fleet-theme-base blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; } .fleet-theme-base hr { border: 0; border-top: 1px solid var(--line); } .fleet-theme-base :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .fleet-theme-base .ok { color: var(--ok); } .fleet-theme-base .warn { color: var(--warn); } .fleet-theme-base .crit { color: var(--crit); }