/* ============================================================ Nick Lian product family - design tokens v4 "Monet" - three themes in one file ------------------------------------------------------------ Generated by the design system's token scripts, which are not in this repository; change it there, not in this file. Source painting: Monet, The Water-Lily Pond 1899 (National Gallery, London, NG4240). In the gallery's own description the field is green and yellow, the water lavender blue and purple, with only a few touches of red and pink. Green 148, light 90, shadow 295, point 6 (the pink of those touches). The deep anchor 196 is the darkest water measured in Water Lilies 1906 (Art Institute of Chicago, 1933.1157). What v4 changes relative to v3.1 (hue assignment, not new tokens): 1. Light and shadow are two different hues, not one lightness axis. Every surface that is lit leans toward hue 90; every recessed surface leans toward hue 295. The four surface levels therefore differ in hue as well as in lightness - that is the juxtaposition, not a gradient. 2. Shadows, hairlines and the overlay are tinted with the shadow hue, never with the text ink and never grey. Monet painted shadow as the complement of light; a grey shadow is the single tell that gives the game away. 3. Light and dark are the same scene at two hours, not an inversion: each dark surface is its light counterpart mixed a further step toward the shadow colour. Warm hues move further than cool ones, the way reds sink into violet at dusk while greens hold. Hue shifts are mixes in the OKLab a/b plane, never rotations around the hue wheel: two near-complementary colours mix through a tinted grey, which is how a painter makes grey without black. 4. No pure black and no pure white anywhere in this file. 5. One point colour (lily pink), under 1.5% of the page, taken from the few strokes in the painting that are at full chroma. Every text-level colour is still solved by inverting WCAG contrast against the hardest surface of its theme, so hue changes cannot silently break AA. Motion touches transform/opacity only; transitions list properties one by one. ============================================================ */ /* ------------------------------------------------------------------ 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; } }