/* onlyati-ui design tokens: the "paper and highlighter" palette with GNOME HIG-inspired layout. Raw colors live only here; every component references a token. An app can override any token in its own :root (loaded after this file) without touching the library. Themes. Every color is a light-dark(light, dark) pair, so one token set serves both modes: follows the system (prefers-color-scheme) always light always dark Page writes data-theme from the theme cookie (see ui.Theme), so there is no flash on load. data-palette="neutral" swaps the warm paper surfaces for plain greys, for apps that aren't on the paper brand. When overriding a color, give both values: --accent-primary: light-dark(#0b5cad, #8cb8f2). A single value applies to both modes. Public brand knobs (safe to override): --accent-primary, --accent-primary-ink, the --bg-*, --text-* and --border-muted surfaces, --radius-*, --font-body, --font-mono, --density. The rest are internal and may change between versions. Breakpoints (custom properties can't be used inside @media, so these are documented here and repeated literally in ui.css / extras.css): phone < 600px tablet 600px – 1023px desktop >= 1024px */ :root { color-scheme: light dark; /* paper surfaces */ --bg-desk: light-dark(#e8dcc7, #12100d); --bg-canvas: light-dark(#fbf3e6, #1c1a16); --bg-surface: light-dark(#f3eadb, #24211c); --bg-surface-alt: light-dark(#f0e4d2, #2f2b24); --border-muted: light-dark(#e3d7c4, #3f392f); /* ink */ --text-primary: light-dark(#1f2328, #ede5d8); --text-secondary: light-dark(#6a625a, #b4aa9a); /* accents */ --accent-primary: var(--hue-blue-ink); --accent-primary-ink: light-dark(#ffffff, #0f1d31); --accent-info: light-dark(#0b4f79, #7cc2ec); --accent-special: light-dark(#6f42c1, #c4a6f2); --section-tile: var(--hue-blue-tile); /* status: never encoded by color alone, always paired with an icon and/or label */ --status-danger: light-dark(#b42318, #ff8f80); --status-warning: light-dark(#8c4600, #f2b261); --status-in-progress: light-dark(#7a5c00, #e8cb5f); --status-completed: light-dark(#1f6f43, #74d095); /* text and glyphs on a filled status, accent-special or primary surface (danger buttons, toasts, avatars) */ --text-on-fill: light-dark(#ffffff, #17140f); /* tinted backgrounds for badges, callouts and banners */ --tint-completed: light-dark(#e1efe6, #1d3326); --tint-special: light-dark(#ece3f7, #2e2540); --tint-info: light-dark(#dde9f3, #1b2c3a); --tint-warning: light-dark(#fdecd2, #3a2b16); --tint-danger: light-dark(#fbe4e1, #3e211d); --tint-danger-strong: light-dark(#f6dbd7, #46241f); /* highlighter */ --highlight-yellow: light-dark(#ffe8a3, #574710); --highlight-peach: light-dark(#ffd1a6, #573722); /* dark chrome: window title strips and the optional dark app bar */ --bg-window-title: light-dark(#3b434d, #36322b); --text-on-window-title: light-dark(#fbf3e6, #ede5d8); --bg-chrome: light-dark(#22272e, #0f0d0a); --text-on-chrome: light-dark(#fbf3e6, #ede5d8); --border-on-chrome: light-dark(rgba(251, 243, 230, 0.28), rgba(237, 229, 216, 0.24)); --hover-on-chrome: light-dark(rgba(251, 243, 230, 0.12), rgba(237, 229, 216, 0.1)); --hover-on-fill: light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.12)); /* controls */ --switch-knob: light-dark(#ffffff, #ede5d8); /* overlays */ --backdrop: light-dark(rgba(31, 35, 40, 0.35), rgba(0, 0, 0, 0.6)); /* section hues (GNOME 47 accent colors). "tile" carries a white glyph (>= 3:1), "ink" is the text-safe variant (>= 4.5:1 on every surface of the current mode: darkened in light mode, lightened in dark mode). */ --hue-blue-tile: #3584e4; --hue-blue-ink: light-dark(#1e4e8c, #8cb8f2); --hue-teal-tile: #2190a4; --hue-teal-ink: light-dark(#0e5f6e, #6fd0de); --hue-purple-tile: #9141ac; --hue-purple-ink: light-dark(#6a2f80, #d6a0e8); --hue-orange-tile: #ed5b00; --hue-orange-ink: light-dark(#a13d00, #ffa66e); --hue-green-tile: #3a944a; --hue-green-ink: light-dark(#2a6634, #84d690); --hue-pink-tile: #d56199; --hue-pink-ink: light-dark(#8f2f5c, #f4a0c6); --tile-glyph: #ffffff; /* print: always black on white paper */ --print-paper: #ffffff; --print-ink: #000000; /* shape */ --radius-card: 12px; --radius-control: 8px; --radius-pill: 999px; /* density: 1 is the default; 0.85 tightens control padding, 1.15 loosens it */ --density: 1; /* spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* type */ --font-body: "Cantarell", "Noto Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --measure: 70ch; /* layout */ --content-max: 1280px; --appbar-height: 56px; --sidebar-width: 240px; --touch-target: 44px; /* elevation */ --shadow-ink: light-dark(rgba(31, 35, 40, 1), rgba(0, 0, 0, 1)); --shadow-window: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--shadow-ink) 14%, transparent); --shadow-soft: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent); --shadow-toast: 0 6px 18px color-mix(in srgb, var(--shadow-ink) 18%, transparent); --shadow-desk: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent), 0 24px 64px color-mix(in srgb, var(--shadow-ink) 22%, transparent); /* motion */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-fast: 0.15s; --dur: 0.25s; } /* data-theme and data-palette work on any element, not just : a dark sidebar in a light page is