/* Titration Vault design tokens. Roles, ratios and the direction: docs/DESIGN_SYSTEM.md. Colours are sRGB hex converted from OKLCH design values so they render on the support floor (Safari 16.4, Chrome 111, Firefox 111). The app resolves the theme into data-scheme on . */ :root { color-scheme: light; /* Primitives: graphite neutrals with a trace of the accent hue (OKLCH hue 285, chroma 0.01) */ --n-0: #ffffff; --n-50: #f7f7fa; --n-100: #efeff4; --n-150: #e6e6ed; --n-200: #dcdce4; --n-300: #c4c4cf; --n-400: #9a9aa8; --n-500: #63636f; --n-600: #52525e; --n-700: #3a3a46; --n-800: #26262f; --n-900: #17171d; --n-950: #0f0f14; --d-100: #1a1a21; --d-150: #20202a; --d-200: #262631; --d-300: #30303c; --d-400: #494956; --d-500: #676777; --d-600: #8f8f9e; --d-700: #b9b9c6; --d-800: #dadae2; --d-900: #f2f2f7; /* Primitives: the trace violet, the one accent */ --v-100: #eee9fb; --v-200: #dcd3f5; --v-300: #c9b8f5; --v-400: #a08ade; --v-500: #8f78cf; --v-600: #5b3fa6; --v-700: #4d3391; --v-800: #3f2879; --v-900: #2a1a52; --v-dark-wash: #2a2140; --v-dark-wash-strong: #3a2e5c; /* Primitives: supporting inks with one job each */ --brick-600: #b42318; --brick-300: #f09a8e; --brick-wash-light: #fdecea; --brick-wash-dark: #3b1a16; --ochre-600: #8a5f18; --ochre-300: #eac07a; /* Semantic roles, light scheme */ --surface-canvas: var(--n-100); --surface-raised: var(--n-0); --surface-raised-2: var(--n-0); --surface-sunken: var(--n-150); --surface-hover: var(--n-100); --surface-pressed: var(--n-150); --surface-selected: var(--v-100); --surface-inverse: var(--n-900); --surface-bar: rgba(255, 255, 255, 0.92); --text-inverse: var(--n-0); --text-primary: var(--n-900); --text-secondary: var(--n-600); --text-tertiary: var(--n-500); --text-on-accent: var(--n-0); /* Faint rules decorate; strong rules bound controls at 3:1 or more. */ --rule-faint: var(--n-200); --rule-strong: #74748a; --rule-ink: var(--n-900); --accent: var(--v-600); --accent-hover: var(--v-700); --accent-pressed: var(--v-800); --accent-tint: var(--v-100); --accent-tint-strong: var(--v-200); --accent-soft: var(--v-500); /* Filled controls take a deep violet with white text in both schemes; the pale accent is for ink and the trace. */ --accent-fill: var(--v-600); --accent-fill-hover: var(--v-700); --text-on-fill: #ffffff; --focus-ring: var(--v-700); --danger: var(--brick-600); --danger-wash: var(--brick-wash-light); --mark: var(--ochre-600); --backdrop: rgba(15, 15, 20, 0.48); --dialog-edge: transparent; --shadow-color: 23, 23, 29; --shadow-1: 0 1px 2px rgba(var(--shadow-color), 0.06), 0 1px 3px rgba(var(--shadow-color), 0.05); --shadow-2: 0 2px 6px rgba(var(--shadow-color), 0.07), 0 8px 24px rgba(var(--shadow-color), 0.08); --shadow-3: 0 -1px 0 rgba(var(--shadow-color), 0.06), 0 -12px 40px rgba(var(--shadow-color), 0.18); --shadow-float: 0 4px 12px rgba(var(--shadow-color), 0.18), 0 1px 3px rgba(var(--shadow-color), 0.12); /* Chart series differ by lightness and point shape, never by a red or green meaning */ --series-sys: var(--accent); --series-dia: var(--v-500); --series-pulse: var(--n-500); --range-band: rgba(91, 63, 166, 0.10); --chart-region: rgba(23, 23, 29, 0.035); --chart-grid: var(--rule-faint); --chart-marker: var(--rule-strong); /* Type: the platform UI face, with optical sizes where the platform has them */ --font-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.1875rem; --text-xl: 1.375rem; --text-2xl: 1.875rem; --text-section: 1.375rem; --text-figure: 2rem; --text-num: 2.25rem; --text-num-lg: 2.75rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.45; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-display: 500; --track-tight: -0.02em; --track-snug: -0.01em; --track-caption: 0.01em; /* Space: 4px grid, with density-dependent roles */ --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; --gap-stack: var(--space-3); --gap-section: var(--space-4); --pad-row: 0.625rem; --pad-group: var(--space-4); --gutter: var(--space-4); /* Interface size (Settings, Display): one multiplier on the root, so every rem follows it. */ --ui-scale: 1; /* Targets: 44px everywhere a thumb lands; 36px only for secondary controls inside a row */ --tap: 2.75rem; --tap-small: 2.25rem; --row: 3.25rem; /* Shape */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --focus-width: 3px; --focus-offset: 2px; --icon-sm: 1rem; --icon-md: 1.25rem; --icon-lg: 1.5rem; /* Motion: short, spring-like, state changes only */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* A chart drawing in and a figure counting to its value; the ceiling for anything the app does. */ --dur-draw: 400ms; /* The gap between parts of a staggered entrance. */ --stagger: 40ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); /* Layers and layout */ --z-bar: 20; --z-sheet: 30; --z-toast: 40; --rail-width: 15rem; --content-max: 90rem; --prose-max: 42rem; --bar-height: 3.75rem; --bar-raise: 1.125rem; --topbar-height: 3.25rem; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --surface-canvas: var(--n-950); --surface-raised: var(--d-100); --surface-raised-2: var(--d-200); --surface-sunken: #0a0a0e; --surface-hover: var(--d-150); --surface-pressed: var(--d-200); --surface-selected: var(--v-dark-wash); --surface-inverse: var(--d-900); --surface-bar: rgba(26, 26, 33, 0.92); --text-inverse: var(--n-950); --text-primary: var(--d-900); --text-secondary: var(--d-700); --text-tertiary: var(--d-600); --text-on-accent: #1a1130; --rule-faint: var(--d-300); --rule-strong: #72728a; --rule-ink: var(--d-800); --accent: var(--v-300); --accent-hover: var(--v-200); --accent-pressed: var(--v-100); --accent-tint: var(--v-dark-wash); --accent-tint-strong: var(--v-dark-wash-strong); --accent-soft: var(--v-400); --accent-fill: #7457cc; --accent-fill-hover: #6547bd; --text-on-fill: #ffffff; --focus-ring: var(--v-200); --danger: var(--brick-300); --danger-wash: var(--brick-wash-dark); --mark: var(--ochre-300); --backdrop: rgba(0, 0, 0, 0.6); --dialog-edge: var(--rule-faint); --shadow-color: 0, 0, 0; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-3: 0 -12px 40px rgba(0, 0, 0, 0.6); --shadow-float: 0 4px 14px rgba(0, 0, 0, 0.5); --series-dia: var(--v-400); --series-pulse: var(--d-600); --range-band: rgba(201, 184, 245, 0.12); --chart-region: rgba(255, 255, 255, 0.03); } } :root[data-contrast="high"] { --surface-canvas: #ffffff; --surface-raised: #ffffff; --surface-raised-2: #ffffff; --surface-sunken: #ffffff; --surface-hover: #e4e4e4; --surface-pressed: #d6d6d6; --surface-selected: #e7e1f6; --surface-inverse: #000000; --surface-bar: #ffffff; --text-inverse: #ffffff; --text-primary: #000000; --text-secondary: #000000; --text-tertiary: #1b1b1b; --text-on-accent: #ffffff; --rule-faint: #2e2e2e; --rule-strong: #000000; --rule-ink: #000000; --accent: #480c80; --accent-hover: #31005b; --accent-pressed: #200040; --accent-tint: #ece4f8; --accent-tint-strong: #d9c9f0; --accent-soft: #5f3a9a; --accent-fill: #480c80; --accent-fill-hover: #31005b; --text-on-fill: #ffffff; --focus-ring: #000000; --danger: #8d0000; --danger-wash: #ffe3e0; --mark: #553200; --dialog-edge: #000000; --shadow-1: 0 0 0 1px #000000; --shadow-2: 0 0 0 1px #000000; --shadow-3: 0 0 0 1px #000000; --shadow-float: 0 0 0 2px #000000; --series-dia: #714ca6; --series-pulse: #161616; --range-band: rgba(72, 12, 128, 0.14); --chart-region: rgba(0, 0, 0, 0.05); } :root[data-contrast="high"][data-scheme="dark"] { --surface-canvas: #000000; --surface-raised: #000000; --surface-raised-2: #000000; --surface-sunken: #000000; --surface-hover: #1f1f1f; --surface-pressed: #333333; --surface-selected: #291c3c; --surface-inverse: #ffffff; --surface-bar: #000000; --text-inverse: #000000; --text-primary: #ffffff; --text-secondary: #ffffff; --text-tertiary: #dedede; --text-on-accent: #000000; --rule-faint: #b7b7b7; --rule-strong: #ffffff; --rule-ink: #ffffff; --accent: #deceff; --accent-hover: #efe6ff; --accent-pressed: #ffffff; --accent-tint: #291c3c; --accent-tint-strong: #3d2d58; --accent-soft: #b9a3ea; --accent-fill: #deceff; --accent-fill-hover: #efe6ff; --text-on-fill: #000000; --focus-ring: #ffffff; --danger: #febbaf; --danger-wash: #3b1a16; --mark: #fed899; --dialog-edge: #ffffff; --shadow-1: 0 0 0 1px #ffffff; --shadow-2: 0 0 0 1px #ffffff; --shadow-3: 0 0 0 1px #ffffff; --shadow-float: 0 0 0 2px #ffffff; --series-dia: #ae96da; --series-pulse: #e4e4e4; --range-band: rgba(222, 206, 255, 0.16); --chart-region: rgba(255, 255, 255, 0.06); } :root[data-density="comfortable"] { --gap-stack: var(--space-4); --gap-section: var(--space-6); --pad-row: var(--space-3); --pad-group: var(--space-5); --row: 3.5rem; } :root[data-targets="large"] { --tap: 3rem; --tap-small: 2.75rem; --row: 3.5rem; } :root[data-motion="reduce"] { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-draw: 0ms; --stagger: 0ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-draw: 0ms; --stagger: 0ms; } } @media (min-width: 25rem) { :root { --gutter: var(--space-5); } } @media (min-width: 48rem) { :root { --gutter: var(--space-6); } } @media (min-width: 64rem) { :root { --gutter: var(--space-8); } } @media (min-width: 90rem) { :root { --gutter: var(--space-10); } }