/* Design tokens — the only source of colour, type, spacing and motion values for this app. Three palettes: Plaster (default), , . Light/dark: follows the OS unless is set (appearance.js stores the choice). Pages consume semantic tokens (--bg, --surface, --text, --accent …), never raw values. */ /* ------------------------------------------------------------------ THEMES. data-theme picks the palette, data-scheme picks light/dark. Plaster, follows the OS Paper, follows the OS Ink, forced dark Plaster and "follow the system" are the DEFAULTS and write no attribute at all - the attribute being present means the user chose something. data-theme="dark" / "light" is a LEGACY alias. Every shipped product has moved to data-scheme; the one remaining consumer is a token-migration script outside this repository, which locates the dark values by matching ^:root[data-theme="dark"]{ at the start of a line. Keep this block standalone and line-start until that script stops parsing for it. Each palette is declared twice: once on :root, once on a bare [data-theme] so a nested element can preview a theme (used by the theme picker) without the page hardcoding any colour. A palette block overrides colour only. Spacing, type scale, radius, shadow geometry and motion are declared once on :root and shared. ------------------------------------------------------------------ */ :root { color-scheme: light; /* ---- 1. Surfaces: four levels. Lightness AND hue both step (see note 1) ---- */ --paper: #fdf6f2; /* cards, table body, inputs - lit plane */ --surface: var(--paper); /* v2 name kept: --surface is the card surface */ --bg: #f7e9e8; /* canvas - the local colour of the scene */ --surface-2: #d3e3d8; /* sunken: nav, table head, code - shadow side */ --surface-raised: #fef9f4; /* menus, popovers (pair with --shadow-2) */ --surface-hover: #faeff2; /* ---- 2. Anchor: the weight of the page. Top bar / signature panel / footer / primary button ---- */ --anchor: #053333; --anchor-2: #052627; /* hover + active step */ --anchor-line: #2f5859; /* rules drawn on the anchor surface */ --on-anchor: #f7f0e9; --on-anchor-2: #c7beb4; /* ---- 3. Point colour: lily pink. Under 1.5% of page area. Seal, signature rule, one chart key ---- */ --point: #ca6980; --point-text: #9c4059; /* use this step when it has to be text */ --point-tint: #ffdce2; --point-tint-text:#7d2d44; /* ---- 4. Text and borders. The ink is a deep violet-blue, not black ---- */ --text: #1d1b24; --text-2: #4c4a54; --text-3: #605e67; --text-inverse: #f7f0e9; --text-disabled: #929198; /* below 4.5 on purpose: disabled is exempt */ --neutral-tint: #faeff2; --neutral-tint-text: #4c4a54; --border: #d6d4df; /* component edge, 1px, shadow-hue tinted */ --border-strong: #bebcc8; --border-input: #797781; /* control edge, >=3:1 on every surface */ --hairline: rgb(40 23 74 / 0.10); /* second, lighter rule weight, shadow hue */ --border-width: 1px; --border-focus-width: 2px; /* ---- 5. Structural roles: which surface carries the band and the nav ---- The band is the top bar, the signature panel and the footer taken together. */ --band: #053333; --on-band: #f7f0e9; --on-band-2: #c7beb4; --band-line: #2f5859; --nav-surface: #d3e3d8; --on-nav: #1d1b24; --on-nav-2: #605e67; --nav-line: #d6d4df; --nav-selected: #fdf6f2; /* Non-text marks placed ON the band (legend keys, bar segments, icons, status dots). Solved against --band, so they hold >=3:1 whether the band is paper or a deep anchor. Never put --viz-seq-* or --warning on the band: fixed values fail on one of the two. */ --on-band-3: #877d72; --on-band-warning: #a97d23; /* ---- 6. Accent and semantic colours ---- */ --accent: #053333; --accent-hover: #052627; --accent-active: #052627; --on-accent: #f7f0e9; --accent-text: #94484a; /* links, icons, focus ring */ --accent-tint: #f7e3e2; /* selected row (plus a 3px leading bar) */ --accent-tint-text: #783739; --brand-rose: #bf8887; /* decoration only: seal, charts, illustration. Never text */ --brand-sage: #69866d; --sage-tint: #dae7db; /* classification tint, never a status */ --sage-tint-text:#27512f; --sage-text: #4a7851; /* decorative small labels only, never a status or link */ --success: #006d49; --success-tint: #c4f4db; --success-tint-text: #005739; --warning: #7e5800; --warning-tint: #fde5bd; --warning-tint-text: #654500; --danger: #a93920; --danger-hover: #99290e; --danger-tint: #ffe1d9; --danger-tint-text: #902003; --on-danger: #f9f6ee; --info: var(--accent-text); --info-tint: var(--accent-tint); --info-tint-text: var(--accent-tint-text); --focus: #94484a; --overlay: rgb(36 35 41 / 0.50); /* shadow hue, low chroma: a full-screen veil dims, it does not repaint */ --selection-bg: var(--accent-tint); /* ---- 7. Grain: the only non-flat surface treatment ---- Inline SVG noise, no network request, greyscale on purpose: it modulates lightness only, so it cannot shift a hue or move a contrast ratio. It is the cheap stand-in for broken brushwork - a coloured or painterly texture here would read as a filter, which is the thing this system must not become. Fixed layer BEHIND content (z-index 0, content z-index 1). Never z-index:-1. */ --grain-opacity: 0.034; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* ---- 8. Data visualisation. Fixed order, assigned in sequence, never cycled ---- */ --viz-1: #de7476; --viz-2: #447838; --viz-3: #a25089; --viz-4: #ca9d33; --viz-5: #3c7ebe; --viz-6: #ab2e45; --viz-7: #14938d; --viz-8: #7860b5; --viz-seq-100: #ffe4e3; --viz-seq-150: #fbd0cf; --viz-seq-200: #f5bcba; --viz-seq-250: #eca5a4; --viz-seq-300: #e09090; --viz-seq-350: #d47b7c; --viz-seq-400: #c5686a; --viz-seq-450: #b55658; --viz-seq-500: #a44448; --viz-seq-550: #91343a; --viz-seq-600: #7c272d; --viz-seq-650: #651d22; --viz-seq-700: #4d1418; --viz-div-neg: var(--viz-5); --viz-div-mid: #d6d4df; --viz-div-pos: var(--viz-1); --viz-grid: var(--border); --viz-axis: var(--text-3); --viz-unknown: repeating-linear-gradient(135deg, #bebcc8 0 3px, transparent 3px 7px); /* ---- 9. Type (unchanged from v3.1: the brief changed the palette, not the type) ---- */ --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Noto Serif SC", "Songti SC", serif; --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --font-mono: "Space Mono", "Space Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --display-weight: 600; --caption-style: italic; --opsz-display: 144; /* page title at 28px and above */ --opsz-title: 28; /* panel titles, 16-24px */ --opsz-caption: 11; /* italic captions - low opsz is what looks engraved */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem; --text-lg: 1rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; /* page title, Fraunces at opsz 144 */ --leading-tight: 1.14; --leading-lede: 1.45; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --tracking-caps: 0.09em; --tracking-display: -0.021em; --tracking-title: -0.009em; --measure: 33em; /* prose line length, about 60–75 characters of Inter (em, not ch: 66ch ran 78–96) */ /* ---- 10. Space / radius / shadow / motion / layers / layout ---- */ --space-0-5: 0.125rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --gutter: var(--space-4); --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* Shadows carry the SHADOW hue, not the ink hue and never grey; light still comes from the top left so every offset is +x +y. */ --shadow-1: 1px 1px 2px rgb(40 23 74 / 0.06), 2px 3px 8px -2px rgb(40 23 74 / 0.10); --shadow-2: 2px 3px 8px rgb(40 23 74 / 0.11), 6px 14px 34px -10px rgb(40 23 74 / 0.24); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 300ms; --dur-exit: 150ms; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-soft: cubic-bezier(0.32, 0.72, 0, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --press-scale: 0.97; --motion-distance: 8px; --flash-dur: 600ms; --z-sticky: 10; --z-drawer: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --topbar-h: 52px; --nav-w: 232px; --nav-w-min: 56px; --inspector-w: 360px; --content-max: 1440px; --control-h: 32px; --row-h: 38px; --touch-min: 44px; } /* Nested preview of the default theme. */ [data-theme="plaster"] { color-scheme: light; --paper: #fdf6f2; --surface: var(--paper); --bg: #f7e9e8; --surface-2: #d3e3d8; --point: #ca6980; --text: #1d1b24; --text-2: #4c4a54; --border: #d6d4df; --band: #053333; --on-band: #f7f0e9; --band-line: #2f5859; --accent: #053333; --on-accent: #f7f0e9; --accent-text: #94484a; } /* --- Paper, light (59 colour tokens differ from the default; 2 preview tokens restated) --- */ :root[data-theme="paper"], [data-theme="paper"] { color-scheme: light; --paper: #fdf6f2; --surface: var(--paper); --bg: #f7f4ed; --surface-2: #e8f4f1; --surface-raised: #fef7f4; --surface-hover: #f5f7f0; --anchor: #19222e; --anchor-2: #0f1722; --anchor-line: #3c4551; --on-anchor: #f9efeb; --on-anchor-2: #c9bcb6; --point: #b54a60; --point-text: #ad3b55; --point-tint: #ffdce0; --point-tint-text: #87233d; --text: #181d25; --text-2: #4b5158; --text-3: #5f646c; --text-inverse: #f9efeb; --text-disabled: #8e9398; --neutral-tint: #f5f7f0; --neutral-tint-text: #4b5158; --border: #d0d7e0; --border-strong: #b6bec9; --border-input: #787e87; --hairline: rgb(0 34 78 / 0.10); --band: #fdf6f2; --on-band: #181d25; --on-band-2: #4b5158; --band-line: #d0d7e0; --nav-surface: #f7f4ed; --on-nav: #181d25; --on-nav-2: #5f646c; --nav-line: #d0d7e0; --on-band-3: #92837d; --on-band-warning: #a5781e; --accent: #b54a60; --accent-hover: #a43b53; --accent-active: #a43b53; --on-accent: #fdf3f1; --accent-text: #984d5a; --accent-tint: #f7e2e5; --accent-tint-text: #773643; --brand-rose: #be878f; --brand-sage: #638773; --sage-tint: #d7e8de; --sage-tint-text: #195238; --sage-text: #3d795b; --success: #007253; --success-tint: #c2f5de; --success-tint-text: #00573e; --warning: #845d00; --danger: #8c1b00; --danger-hover: #771200; --on-danger: #fdf3f1; --focus: #984d5a; --overlay: rgb(32 36 42 / 0.50); --viz-div-mid: #d0d7e0; --viz-unknown: repeating-linear-gradient(135deg, #b6bec9 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(0 34 78 / 0.06), 2px 3px 8px -2px rgb(0 34 78 / 0.10); --shadow-2: 2px 3px 8px rgb(0 34 78 / 0.11), 6px 14px 34px -10px rgb(0 34 78 / 0.24); } /* --- Ink, light (63 colour tokens differ from the default; 1 preview tokens restated) --- */ :root[data-theme="ink"], [data-theme="ink"] { color-scheme: light; --paper: #fbf8f1; --surface: var(--paper); --bg: #e7f2ef; --surface-2: #f0e1e4; --surface-raised: #fef8f4; --surface-hover: #edf6f8; --anchor: #241b34; --anchor-2: #1a1028; --anchor-line: #473f58; --on-anchor: #f8f0ea; --on-anchor-2: #c8bdb4; --point: #cf5821; --point-text: #ad3e00; --point-tint: #ffded2; --point-tint-text: #842c00; --text: #1e1b24; --text-2: #504d56; --text-3: #64616a; --text-inverse: #f8f0ea; --text-disabled: #939198; --neutral-tint: #edf6f8; --neutral-tint-text: #504d56; --border: #d7d4df; --border-strong: #bfbbc8; --border-input: #7e7b85; --hairline: rgb(44 22 72 / 0.10); --band: #241b34; --on-band: #f8f0ea; --on-band-2: #c8bdb4; --band-line: #473f58; --nav-surface: #241b34; --on-nav: #f8f0ea; --on-nav-2: #c8bdb4; --nav-line: #473f58; --nav-selected: #1a1028; --on-band-3: #7b7066; --on-band-warning: #9c700e; --accent: #241b34; --accent-hover: #1a1028; --accent-active: #1a1028; --on-accent: #f8f0ea; --accent-text: #984b54; --accent-tint: #f7e2e4; --accent-tint-text: #77363e; --brand-rose: #be878b; --brand-sage: #5c877d; --sage-tint: #d5e8e3; --sage-tint-text: #005346; --sage-text: #2c7a6b; --success: #21703f; --success-tint: #caf3d4; --success-tint-text: #005829; --warning: #835b00; --danger: #ac3857; --danger-hover: #9b284a; --danger-tint: #ffdfe4; --danger-tint-text: #8f1a40; --on-danger: #fdf4f0; --focus: #984b54; --overlay: rgb(37 35 41 / 0.50); --viz-div-mid: #d7d4df; --viz-unknown: repeating-linear-gradient(135deg, #bfbbc8 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(44 22 72 / 0.06), 2px 3px 8px -2px rgb(44 22 72 / 0.10); --shadow-2: 2px 3px 8px rgb(44 22 72 / 0.11), 6px 14px 34px -10px rgb(44 22 72 / 0.24); } @media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]):not([data-theme="light"]) { color-scheme: dark; --paper: #241f27; --surface: var(--paper); --bg: #130e15; --surface-2: #0b1e16; --surface-raised: #2e2831; --surface-hover: #2c232f; --anchor: #163437; --anchor-2: #224042; --anchor-line: #395456; --on-anchor: #ece5de; --on-anchor-2: #afa69d; --point: #f8a1b3; --point-text: #d17d8f; --point-tint: #3f1f26; --point-tint-text: #f09eaf; --text: #ebe5df; --text-2: #b2adb6; --text-3: #98949b; --text-inverse: #130e15; --text-disabled: #5a565c; --neutral-tint: #2c232f; --neutral-tint-text: #b2adb6; --border: #35323d; --border-strong: #4a4753; --border-input: #7c7780; --hairline: rgb(235 229 223 / 0.15); --band: #163437; --on-band: #ece5de; --on-band-2: #afa69d; --band-line: #395456; --nav-surface: #0b1e16; --on-nav: #ebe5df; --on-nav-2: #98949b; --nav-line: #35323d; --nav-selected: #241f27; --on-band-3: #897f74; --on-band-warning: #a98034; --accent: #add5d8; --accent-hover: #c4e3e6; --accent-active: #f8a1b3; --on-accent: #121116; --accent-text: #c78383; --accent-tint: #352222; --accent-tint-text: #e3a2a0; --brand-rose: #d39a99; --brand-sage: #7f9481; --sage-tint: #212b22; --sage-tint-text: #94bf99; --sage-text: #6a9770; --success: #3ca77a; --success-tint: #03301f; --success-tint-text: #60c999; --warning: #b98e40; --warning-tint: #362505; --warning-tint-text: #d9ad60; --danger: #da7b66; --danger-hover: #eb8b75; --danger-tint: #3d2019; --danger-tint-text: #fb9a83; --on-danger: #0d0c12; --info: var(--accent-text); --info-tint: var(--accent-tint); --info-tint-text: var(--accent-tint-text); --focus: #c78383; --overlay: rgb(4 3 7 / 0.72); --selection-bg: var(--accent-tint); --grain-opacity: 0.046; --viz-1: #d67072; --viz-2: #3c7030; --viz-3: #b25e98; --viz-4: #b3880f; --viz-5: #488acb; --viz-6: #b84455; --viz-7: #169d97; --viz-8: #866ec5; --viz-div-mid: #35323d; --viz-grid: var(--border); --viz-axis: var(--text-3); --viz-unknown: repeating-linear-gradient(135deg, #4a4753 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(6 0 21 / 0.50), 2px 3px 8px -2px rgb(6 0 21 / 0.46); --shadow-2: 2px 3px 10px rgb(6 0 21 / 0.55), 6px 16px 38px -10px rgb(6 0 21 / 0.70); } [data-theme="plaster"]:not([data-scheme="light"]) { color-scheme: dark; --paper: #241f27; --surface: var(--paper); --bg: #130e15; --surface-2: #0b1e16; --point: #f8a1b3; --text: #ebe5df; --text-2: #b2adb6; --border: #35323d; --band: #163437; --on-band: #ece5de; --band-line: #395456; --accent: #add5d8; --on-accent: #121116; --accent-text: #c78383; } :root[data-theme="paper"]:not([data-scheme="light"]) { color-scheme: dark; --paper: #1d2129; --surface: var(--paper); --bg: #0b1117; --surface-2: #061e1e; --surface-raised: #272b34; --surface-hover: #1b2b25; --anchor: #233041; --anchor-2: #2e3b4d; --anchor-line: #434f60; --on-anchor: #eee4e0; --on-anchor-2: #b1a5a0; --point: #ff9dac; --point-text: #dd7889; --point-tint: #431c23; --point-tint-text: #fb98a7; --text: #ede4e0; --text-2: #abb0b9; --text-3: #93969e; --text-inverse: #0b1117; --text-disabled: #55585e; --neutral-tint: #1b2b25; --neutral-tint-text: #abb0b9; --border: #2e353d; --border-strong: #424a54; --border-input: #757a83; --hairline: rgb(237 228 224 / 0.15); --band: #233041; --on-band: #eee4e0; --on-band-2: #b1a5a0; --band-line: #434f60; --nav-surface: #0b1117; --on-nav: #ede4e0; --on-nav-2: #93969e; --nav-line: #2e353d; --nav-selected: #1d2129; --on-band-3: #8c7d77; --on-band-warning: #a88034; --accent: #f5bac2; --accent-hover: #feced4; --accent-active: #ff9dac; --on-accent: #0e1216; --accent-text: #c7848d; --accent-tint: #352225; --accent-tint-text: #e3a2aa; --brand-rose: #d299a1; --brand-sage: #7a9586; --sage-tint: #1f2b24; --sage-tint-text: #8ac0a2; --sage-text: #5f987a; --success: #33a981; --success-tint: #003121; --success-tint-text: #5acaa0; --warning: #ba8f41; --warning-tint: #362505; --warning-tint-text: #d9ad60; --danger: #db7c66; --danger-hover: #ec8c75; --danger-tint: #3d2019; --danger-tint-text: #fb9a83; --on-danger: #0a0e12; --info: var(--accent-text); --info-tint: var(--accent-tint); --info-tint-text: var(--accent-tint-text); --focus: #c7848d; --overlay: rgb(2 4 7 / 0.72); --selection-bg: var(--accent-tint); --grain-opacity: 0.046; --viz-1: #d67072; --viz-2: #3c7030; --viz-3: #b25e98; --viz-4: #b3880f; --viz-5: #488acb; --viz-6: #b84455; --viz-7: #169d97; --viz-8: #866ec5; --viz-div-mid: #2e353d; --viz-grid: var(--border); --viz-axis: var(--text-3); --viz-unknown: repeating-linear-gradient(135deg, #424a54 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(0 2 23 / 0.50), 2px 3px 8px -2px rgb(0 2 23 / 0.46); --shadow-2: 2px 3px 10px rgb(0 2 23 / 0.55), 6px 16px 38px -10px rgb(0 2 23 / 0.70); } [data-theme="paper"]:not([data-scheme="light"]) { color-scheme: dark; --paper: #1d2129; --surface: var(--paper); --bg: #0b1117; --surface-2: #061e1e; --point: #ff9dac; --text: #ede4e0; --text-2: #abb0b9; --border: #2e353d; --band: #233041; --on-band: #eee4e0; --band-line: #434f60; --accent: #f5bac2; --on-accent: #0e1216; --accent-text: #c7848d; } :root[data-theme="ink"]:not([data-scheme="light"]) { color-scheme: dark; --paper: #251e26; --surface: var(--paper); --bg: #081314; --surface-2: #201522; --surface-raised: #2e2831; --surface-hover: #1c2932; --anchor: #322b3f; --anchor-2: #3d364b; --anchor-line: #514b5e; --on-anchor: #ece5de; --on-anchor-2: #afa69e; --point: #ffa37f; --point-text: #e0794f; --point-tint: #441d0d; --point-tint-text: #ff9a73; --text: #ece5df; --text-2: #b4acb4; --text-3: #9a939a; --text-inverse: #081314; --text-disabled: #5b565b; --neutral-tint: #1c2932; --neutral-tint-text: #b4acb4; --border: #35323c; --border-strong: #4a4752; --border-input: #7e777e; --hairline: rgb(236 229 223 / 0.15); --band: #322b3f; --on-band: #ece5de; --on-band-2: #afa69e; --band-line: #514b5e; --nav-surface: #322b3f; --on-nav: #ece5de; --on-nav-2: #afa69e; --nav-line: #514b5e; --nav-selected: #3d364b; --on-band-3: #897d74; --on-band-warning: #a77f33; --accent: #d0c6e4; --accent-hover: #dfd8f0; --accent-active: #ffa37f; --on-accent: #121116; --accent-text: #c68388; --accent-tint: #352224; --accent-tint-text: #e3a2a6; --brand-rose: #d29a9e; --brand-sage: #75968e; --sage-tint: #1d2b28; --sage-tint-text: #80c1b1; --sage-text: #529888; --success: #51a66b; --success-tint: #0d3019; --success-tint-text: #73c88b; --warning: #b98e40; --warning-tint: #362505; --warning-tint-text: #d9ad60; --danger: #d9788b; --danger-hover: #ea879a; --danger-tint: #3d1e24; --danger-tint-text: #fa96a9; --on-danger: #0e0c11; --info: var(--accent-text); --info-tint: var(--accent-tint); --info-tint-text: var(--accent-tint-text); --focus: #c68388; --overlay: rgb(4 3 7 / 0.72); --selection-bg: var(--accent-tint); --grain-opacity: 0.046; --viz-1: #d67072; --viz-2: #3c7030; --viz-3: #b25e98; --viz-4: #b3880f; --viz-5: #488acb; --viz-6: #b84455; --viz-7: #169d97; --viz-8: #866ec5; --viz-div-mid: #35323c; --viz-grid: var(--border); --viz-axis: var(--text-3); --viz-unknown: repeating-linear-gradient(135deg, #4a4752 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(7 0 20 / 0.50), 2px 3px 8px -2px rgb(7 0 20 / 0.46); --shadow-2: 2px 3px 10px rgb(7 0 20 / 0.55), 6px 16px 38px -10px rgb(7 0 20 / 0.70); } [data-theme="ink"]:not([data-scheme="light"]) { color-scheme: dark; --paper: #251e26; --surface: var(--paper); --bg: #081314; --surface-2: #201522; --point: #ffa37f; --text: #ece5df; --text-2: #b4acb4; --border: #35323c; --band: #322b3f; --on-band: #ece5de; --band-line: #514b5e; --accent: #d0c6e4; --on-accent: #121116; --accent-text: #c68388; } } /* Legacy alias. Must stay a standalone, line-start block: a token-migration script outside this repository locates the dark values with ^:root\[data-theme="dark"\]\s*\{ and would silently read light values as dark if this were folded into a selector list. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #241f27; --surface: var(--paper); --bg: #130e15; --surface-2: #0b1e16; --surface-raised: #2e2831; --surface-hover: #2c232f; --anchor: #163437; --anchor-2: #224042; --anchor-line: #395456; --on-anchor: #ece5de; --on-anchor-2: #afa69d; --point: #f8a1b3; --point-text: #d17d8f; --point-tint: #3f1f26; --point-tint-text: #f09eaf; --text: #ebe5df; --text-2: #b2adb6; --text-3: #98949b; --text-inverse: #130e15; --text-disabled: #5a565c; --neutral-tint: #2c232f; --neutral-tint-text: #b2adb6; --border: #35323d; --border-strong: #4a4753; --border-input: #7c7780; --hairline: rgb(235 229 223 / 0.15); --band: #163437; --on-band: #ece5de; --on-band-2: #afa69d; --band-line: #395456; --nav-surface: #0b1e16; --on-nav: #ebe5df; --on-nav-2: #98949b; --nav-line: #35323d; --nav-selected: #241f27; --on-band-3: #897f74; --on-band-warning: #a98034; --accent: #add5d8; --accent-hover: #c4e3e6; --accent-active: #f8a1b3; --on-accent: #121116; --accent-text: #c78383; --accent-tint: #352222; --accent-tint-text: #e3a2a0; --brand-rose: #d39a99; --brand-sage: #7f9481; --sage-tint: #212b22; --sage-tint-text: #94bf99; --sage-text: #6a9770; --success: #3ca77a; --success-tint: #03301f; --success-tint-text: #60c999; --warning: #b98e40; --warning-tint: #362505; --warning-tint-text: #d9ad60; --danger: #da7b66; --danger-hover: #eb8b75; --danger-tint: #3d2019; --danger-tint-text: #fb9a83; --on-danger: #0d0c12; --info: var(--accent-text); --info-tint: var(--accent-tint); --info-tint-text: var(--accent-tint-text); --focus: #c78383; --overlay: rgb(4 3 7 / 0.72); --selection-bg: var(--accent-tint); --grain-opacity: 0.046; --viz-1: #d67072; --viz-2: #3c7030; --viz-3: #b25e98; --viz-4: #b3880f; --viz-5: #488acb; --viz-6: #b84455; --viz-7: #169d97; --viz-8: #866ec5; --viz-div-mid: #35323d; --viz-grid: var(--border); --viz-axis: var(--text-3); --viz-unknown: repeating-linear-gradient(135deg, #4a4753 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(6 0 21 / 0.50), 2px 3px 8px -2px rgb(6 0 21 / 0.46); --shadow-2: 2px 3px 10px rgb(6 0 21 / 0.55), 6px 16px 38px -10px rgb(6 0 21 / 0.70); } :root[data-scheme="dark"] { color-scheme: dark; --paper: #241f27; --surface: var(--paper); --bg: #130e15; --surface-2: #0b1e16; --surface-raised: #2e2831; --surface-hover: #2c232f; --anchor: #163437; --anchor-2: #224042; --anchor-line: #395456; --on-anchor: #ece5de; --on-anchor-2: #afa69d; --point: #f8a1b3; --point-text: #d17d8f; --point-tint: #3f1f26; --point-tint-text: #f09eaf; --text: #ebe5df; --text-2: #b2adb6; --text-3: #98949b; --text-inverse: #130e15; --text-disabled: #5a565c; --neutral-tint: #2c232f; --neutral-tint-text: #b2adb6; --border: #35323d; --border-strong: #4a4753; --border-input: #7c7780; --hairline: rgb(235 229 223 / 0.15); --band: #163437; --on-band: #ece5de; --on-band-2: #afa69d; --band-line: #395456; --nav-surface: #0b1e16; --on-nav: #ebe5df; --on-nav-2: #98949b; --nav-line: #35323d; --nav-selected: #241f27; --on-band-3: #897f74; --on-band-warning: #a98034; --accent: #add5d8; --accent-hover: #c4e3e6; --accent-active: #f8a1b3; --on-accent: #121116; --accent-text: #c78383; --accent-tint: #352222; --accent-tint-text: #e3a2a0; --brand-rose: #d39a99; --brand-sage: #7f9481; --sage-tint: #212b22; --sage-tint-text: #94bf99; --sage-text: #6a9770; --success: #3ca77a; --success-tint: #03301f; --success-tint-text: #60c999; --warning: #b98e40; --warning-tint: #362505; --warning-tint-text: #d9ad60; --danger: #da7b66; --danger-hover: #eb8b75; --danger-tint: #3d2019; --danger-tint-text: #fb9a83; --on-danger: #0d0c12; --info: var(--accent-text); --info-tint: var(--accent-tint); --info-tint-text: var(--accent-tint-text); --focus: #c78383; --overlay: rgb(4 3 7 / 0.72); --selection-bg: var(--accent-tint); --grain-opacity: 0.046; --viz-1: #d67072; --viz-2: #3c7030; --viz-3: #b25e98; --viz-4: #b3880f; --viz-5: #488acb; --viz-6: #b84455; --viz-7: #169d97; --viz-8: #866ec5; --viz-div-mid: #35323d; --viz-grid: var(--border); --viz-axis: var(--text-3); --viz-unknown: repeating-linear-gradient(135deg, #4a4753 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(6 0 21 / 0.50), 2px 3px 8px -2px rgb(6 0 21 / 0.46); --shadow-2: 2px 3px 10px rgb(6 0 21 / 0.55), 6px 16px 38px -10px rgb(6 0 21 / 0.70); } [data-theme="plaster"][data-scheme="dark"] { color-scheme: dark; --paper: #241f27; --surface: var(--paper); --bg: #130e15; --surface-2: #0b1e16; --point: #f8a1b3; --text: #ebe5df; --text-2: #b2adb6; --border: #35323d; --band: #163437; --on-band: #ece5de; --band-line: #395456; --accent: #add5d8; --on-accent: #121116; --accent-text: #c78383; } :root[data-theme="paper"][data-scheme="dark"], [data-theme="paper"][data-scheme="dark"] { color-scheme: dark; --paper: #1d2129; --surface: var(--paper); --bg: #0b1117; --surface-2: #061e1e; --surface-raised: #272b34; --surface-hover: #1b2b25; --anchor: #233041; --anchor-2: #2e3b4d; --anchor-line: #434f60; --on-anchor: #eee4e0; --on-anchor-2: #b1a5a0; --point: #ff9dac; --point-text: #dd7889; --point-tint: #431c23; --point-tint-text: #fb98a7; --text: #ede4e0; --text-2: #abb0b9; --text-3: #93969e; --text-inverse: #0b1117; --text-disabled: #55585e; --neutral-tint: #1b2b25; --neutral-tint-text: #abb0b9; --border: #2e353d; --border-strong: #424a54; --border-input: #757a83; --hairline: rgb(237 228 224 / 0.15); --band: #233041; --on-band: #eee4e0; --on-band-2: #b1a5a0; --band-line: #434f60; --nav-surface: #0b1117; --on-nav: #ede4e0; --on-nav-2: #93969e; --nav-line: #2e353d; --nav-selected: #1d2129; --on-band-3: #8c7d77; --on-band-warning: #a88034; --accent: #f5bac2; --accent-hover: #feced4; --accent-active: #ff9dac; --on-accent: #0e1216; --accent-text: #c7848d; --accent-tint: #352225; --accent-tint-text: #e3a2aa; --brand-rose: #d299a1; --brand-sage: #7a9586; --sage-tint: #1f2b24; --sage-tint-text: #8ac0a2; --sage-text: #5f987a; --success: #33a981; --success-tint: #003121; --success-tint-text: #5acaa0; --warning: #ba8f41; --warning-tint: #362505; --warning-tint-text: #d9ad60; --danger: #db7c66; --danger-hover: #ec8c75; --danger-tint: #3d2019; --danger-tint-text: #fb9a83; --on-danger: #0a0e12; --info: var(--accent-text); --info-tint: var(--accent-tint); --info-tint-text: var(--accent-tint-text); --focus: #c7848d; --overlay: rgb(2 4 7 / 0.72); --selection-bg: var(--accent-tint); --grain-opacity: 0.046; --viz-1: #d67072; --viz-2: #3c7030; --viz-3: #b25e98; --viz-4: #b3880f; --viz-5: #488acb; --viz-6: #b84455; --viz-7: #169d97; --viz-8: #866ec5; --viz-div-mid: #2e353d; --viz-grid: var(--border); --viz-axis: var(--text-3); --viz-unknown: repeating-linear-gradient(135deg, #424a54 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(0 2 23 / 0.50), 2px 3px 8px -2px rgb(0 2 23 / 0.46); --shadow-2: 2px 3px 10px rgb(0 2 23 / 0.55), 6px 16px 38px -10px rgb(0 2 23 / 0.70); } :root[data-theme="ink"][data-scheme="dark"], [data-theme="ink"][data-scheme="dark"] { color-scheme: dark; --paper: #251e26; --surface: var(--paper); --bg: #081314; --surface-2: #201522; --surface-raised: #2e2831; --surface-hover: #1c2932; --anchor: #322b3f; --anchor-2: #3d364b; --anchor-line: #514b5e; --on-anchor: #ece5de; --on-anchor-2: #afa69e; --point: #ffa37f; --point-text: #e0794f; --point-tint: #441d0d; --point-tint-text: #ff9a73; --text: #ece5df; --text-2: #b4acb4; --text-3: #9a939a; --text-inverse: #081314; --text-disabled: #5b565b; --neutral-tint: #1c2932; --neutral-tint-text: #b4acb4; --border: #35323c; --border-strong: #4a4752; --border-input: #7e777e; --hairline: rgb(236 229 223 / 0.15); --band: #322b3f; --on-band: #ece5de; --on-band-2: #afa69e; --band-line: #514b5e; --nav-surface: #322b3f; --on-nav: #ece5de; --on-nav-2: #afa69e; --nav-line: #514b5e; --nav-selected: #3d364b; --on-band-3: #897d74; --on-band-warning: #a77f33; --accent: #d0c6e4; --accent-hover: #dfd8f0; --accent-active: #ffa37f; --on-accent: #121116; --accent-text: #c68388; --accent-tint: #352224; --accent-tint-text: #e3a2a6; --brand-rose: #d29a9e; --brand-sage: #75968e; --sage-tint: #1d2b28; --sage-tint-text: #80c1b1; --sage-text: #529888; --success: #51a66b; --success-tint: #0d3019; --success-tint-text: #73c88b; --warning: #b98e40; --warning-tint: #362505; --warning-tint-text: #d9ad60; --danger: #d9788b; --danger-hover: #ea879a; --danger-tint: #3d1e24; --danger-tint-text: #fa96a9; --on-danger: #0e0c11; --info: var(--accent-text); --info-tint: var(--accent-tint); --info-tint-text: var(--accent-tint-text); --focus: #c68388; --overlay: rgb(4 3 7 / 0.72); --selection-bg: var(--accent-tint); --grain-opacity: 0.046; --viz-1: #d67072; --viz-2: #3c7030; --viz-3: #b25e98; --viz-4: #b3880f; --viz-5: #488acb; --viz-6: #b84455; --viz-7: #169d97; --viz-8: #866ec5; --viz-div-mid: #35323c; --viz-grid: var(--border); --viz-axis: var(--text-3); --viz-unknown: repeating-linear-gradient(135deg, #4a4752 0 3px, transparent 3px 7px); --shadow-1: 1px 1px 2px rgb(7 0 20 / 0.50), 2px 3px 8px -2px rgb(7 0 20 / 0.46); --shadow-2: 2px 3px 10px rgb(7 0 20 / 0.55), 6px 16px 38px -10px rgb(7 0 20 / 0.70); } @media (pointer: coarse) { :root { --control-h: 40px; --row-h: 44px; } } /* Reduced motion: keep the feedback, drop the movement. Not a blanket kill switch - colour and opacity still transition (they carry meaning), only transforms and travel distance are removed. */ @media (prefers-reduced-motion: reduce) { :root { --dur-slow: 120ms; --motion-distance: 0px; --flash-dur: 1ms; } *, *::before, *::after { transition-property: opacity, background-color, border-color, color, box-shadow, outline-color !important; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }