/* * Dock Control — design tokens. * * Straight from the design handoff, with one change: the prototype's variable * names were hash-derived (--t17120f) because it was mechanically generated. * These are the same values under semantic names, which is what the handoff * asks for. Both themes define the SAME set, so switching is one attribute on * and nothing else in the app knows a theme exists. * * Dark ("night watch") is the default. Light ("daylight") is not a filter over * it — the accent moves amber → teal and the greys are cool rather than warm, * so every token is restated rather than derived. */ :root, [data-theme="dark"] { /* surfaces, back to front */ --bg-shell: #0F0C0A; --bg-rail: #141010; --bg-page: #17120F; --bg-bar: #1A1512; --bg-bulk: #1B1512; --bg-topbar-b: #171210; --bg-panel: #1C1613; --bg-inner: #1E1713; --bg-selected: #231A12; --bg-track: #241C17; --bg-field: #17120F; --bg-header: #221A15; /* lines, thinnest to strongest */ --line: #2A211B; --line-row: #2E251E; --line-muted: #3A2E26; --line-divider: #33281F; --line-card: #3F3129; --line-strong: #4A3A2E; --line-window: #2E2621; /* type, brightest to faintest */ --ink: #F2E6D8; --ink-2: #D8C7B6; --ink-body: #A89684; --ink-label: #9C8B7C; --ink-meta: #8E7D6E; --ink-faint: #7A6A5C; --ink-fainter: #6A5A4C; --ink-disabled: #5A4839; /* meaning */ --accent: #FFB23F; --accent-deep: #C9781C; --good: #3FC7A8; --bad: #D2472A; --bad-soft: #C08A72; --bad-bright: #E07C60; --bronze: #C9A06A; --bad-line: #6B3A2A; /* tints — alpha is fixed, only the triplet swaps between themes */ --accent-04: rgba(255, 178, 63, .04); --accent-08: rgba(255, 178, 63, .08); --accent-10: rgba(255, 178, 63, .10); --accent-13: rgba(255, 178, 63, .13); --accent-20: rgba(255, 178, 63, .20); --accent-35: rgba(255, 178, 63, .35); --accent-40: rgba(255, 178, 63, .40); --accent-55: rgba(255, 178, 63, .55); --good-04: rgba(63, 199, 168, .04); --good-10: rgba(63, 199, 168, .10); --good-16: rgba(63, 199, 168, .16); --good-45: rgba(63, 199, 168, .45); --bad-06: rgba(210, 71, 42, .06); --bad-10: rgba(210, 71, 42, .10); --bad-40: rgba(210, 71, 42, .40); --shadow: rgba(0, 0, 0, .5); --sheen: rgba(255, 255, 255, .05); color-scheme: dark; } [data-theme="light"] { --bg-shell: #E3E3E6; --bg-rail: #EFEFF1; --bg-page: #F7F7F8; --bg-bar: #EAEAED; --bg-bulk: #EAEAED; --bg-topbar-b: #F1F1F3; --bg-panel: #FFFFFF; --bg-inner: #F4F4F6; --bg-selected: #E4F1EE; --bg-track: #E8E8EB; --bg-field: #F7F7F8; --bg-header: #EEEEF0; --line: #E3E3E6; --line-row: #E0E0E3; --line-muted: #DBDBDE; --line-divider: #DEDEE1; --line-card: #D4D4D7; --line-strong: #C6C6C9; --line-window: #D7D7DA; --ink: #1B1C1E; --ink-2: #35363A; --ink-body: #5E5F63; --ink-label: #66676B; --ink-meta: #6F7175; --ink-faint: #616266; --ink-fainter: #66676B; --ink-disabled: #727378; --accent: #0B6A66; --accent-deep: #084F4C; /* Not a brighter teal: 8.5px metadata has to clear 4.5:1 on white, and the dark theme's #3FC7A8 does not. The handoff pins this exact value. */ --good: #157A52; --bad: #A6402A; --bad-soft: #98523C; --bad-bright: #B04227; --bronze: #8A6A3C; --bad-line: #D9B4A8; --accent-04: rgba(11, 106, 102, .04); --accent-08: rgba(11, 106, 102, .08); --accent-10: rgba(11, 106, 102, .10); --accent-13: rgba(11, 106, 102, .13); --accent-20: rgba(11, 106, 102, .20); --accent-35: rgba(11, 106, 102, .35); --accent-40: rgba(11, 106, 102, .40); --accent-55: rgba(11, 106, 102, .55); --good-04: rgba(26, 138, 95, .04); --good-10: rgba(26, 138, 95, .10); --good-16: rgba(26, 138, 95, .16); --good-45: rgba(26, 138, 95, .45); --bad-06: rgba(166, 64, 42, .06); --bad-10: rgba(166, 64, 42, .10); --bad-40: rgba(166, 64, 42, .40); --shadow: rgba(44, 44, 48, .16); --sheen: rgba(44, 44, 48, .05); color-scheme: light; }