/* LOUD · colour roles * * EVERY VALUE IS A ROLE, NOT A COLOUR. A component references `var(--x-ink-2)`, never a hex. * That is the whole reason one set of markup serves both THRY systems and both themes: a * theme swap rewrites the roles underneath and no component knows it happened. * * Light is on `:root`. Dark is `[data-theme="dark"]` on . * * `--x-on-ink` is the FOREGROUND for ink-filled surfaces — a selected chip, a filled pill. * It resolves to canvas because canvas is ink's inverse in both themes; the role exists so a * future tint on canvas cannot drag that text with it. Before it existed, this system * hard-coded #F8F7F4 there and a selected chip measured 1.05:1 in dark. */ :root { --x-canvas: #EAE7E2; --x-surface: #FFFFFF; --x-surface-2: #F4F2EF; --x-ink: #0C0C0B; --x-on-ink: var(--x-canvas); /* added r3 · decision:inverted-ink-role (c). The foreground role for ink-filled surfaces — a selected chip, a filled pill. It resolves to canvas TODAY because canvas is ink's inverse in both themes; the role exists so that a future tint on canvas cannot drag this text with it. */ --x-ink-2: #4A4945; --x-ink-3: #67655F; --x-line: #D7D3CC; --x-line-2: #C2BDB4; --x-strong: #0C0C0B; --x-accent: #D8FF3E; --x-on-accent: #0C0C0B; --x-accent-soft: #F2FFC4; --x-film: #0C0C0B; --x-on-film: #F5F3EF; --x-ok: #12A150; --x-warn: #C97A00; --x-bad: #D40009; --x-skel: #DEDAD3; --x-lane-1: #FF1E8C; --x-lane-2: #5B3FD6; --x-lane-3: #1E4FFF; --x-lane-4: #00A2E8; --x-lane-5: #00C878; --x-lane-6: var(--x-accent); --x-lane-7: var(--x-ink); --x-mark-ok: #12A150; --x-mark-bad: #D40009; --x-stamp-ok: #12A150; --x-stamp-bad: #D40009; --x-highlight: color-mix(in oklch, var(--x-accent) 62%, var(--x-surface)); --x-on-highlight: var(--x-ink); --x-badge: color-mix(in oklch, var(--x-accent) 42%, var(--x-surface)); --x-bar: var(--x-surface); --x-bar-opaque: var(--x-surface); --x-knob: var(--x-surface); --x-radius-card: 20px; --x-radius-control: 10px; --x-radius-group: 20px; --x-radius-pill: 999px; --x-radius-sheet: 24px; --x-radius-well: 12px; --x-clip-blade: 22px; --x-border-hairline: 1px; --x-border-card: 1.5px; --x-border-emphasis: 1.5px; --x-space-screen-margin: 16px; --x-space-row-min: 44px; --x-space-row-comfortable: 52px; --x-space-card-pad: 17px; --x-space-group-gap: 14px; --x-space-section-gap: 64px; --x-space-tab-bar-height: 83px; --x-space-nav-bar-height: 56px; --x-size-card-w: 300px; --x-size-card-h: 375px; --x-size-specimen-w: 340px; --x-size-specimen-h: 425px; --x-size-tile-w: 170px; --x-size-photo-well: 112px; --x-size-mini-w: 96px; --x-size-mini-h: 60px; --x-size-initials-well: 36px; --x-size-ring-full: 96px; --x-size-ring-small: 112px; --x-size-ring-micro: 48px; --x-size-sheet-sm: 420px; --x-size-sheet-md: 460px; --x-size-sheet-lg: 520px; --x-size-sheet-xl: 560px; --x-size-sheet-2xl: 700px; --x-space-sheet-inset: 16px; --x-size-control: 48px; --x-size-control-wide: 36px; --x-size-rail: 56px; --x-size-strip: 34px; --x-size-glance-cell: 76px; --x-shadow-1: none; --x-shadow-2: none; --x-motion-dur-press: 120ms; --x-motion-dur-sheet: 200ms; --x-motion-dur-flip: 620ms; --x-motion-ease-standard: cubic-bezier(.16,1,.3,1); --x-motion-ease-flip: cubic-bezier(.2,.8,.2,1); --x-motion-press-scale: 0.97; --x-motion-dur-state: 160ms; --x-blur-bar: 20px; } [data-theme="dark"] { --x-canvas: #0B0B0A; --x-surface: #161614; --x-surface-2: #201F1C; --x-ink: #F5F3EF; --x-on-ink: var(--x-canvas); /* added r3 · decision:inverted-ink-role (c). The foreground role for ink-filled surfaces — a selected chip, a filled pill. It resolves to canvas TODAY because canvas is ink's inverse in both themes; the role exists so that a future tint on canvas cannot drag this text with it. */ --x-ink-2: #B3B1AA; --x-ink-3: #94918A; --x-line: #2E2D29; --x-line-2: #3D3B36; --x-strong: #F5F3EF; --x-accent: #D8FF3E; --x-on-accent: #0C0C0B; --x-accent-soft: #2A3308; --x-film: #0C0C0B; --x-on-film: #F5F3EF; --x-ok: #3ED07E; --x-warn: #FFB92E; --x-bad: #FF5B52; --x-skel: #252420; --x-lane-1: #FF1E8C; --x-lane-2: #5B3FD6; --x-lane-3: #1E4FFF; --x-lane-4: #00A2E8; --x-lane-5: #00C878; --x-lane-6: var(--x-accent); --x-lane-7: var(--x-ink); --x-mark-ok: #3ED07E; --x-mark-bad: #FF5B52; --x-stamp-ok: #3ED07E; --x-stamp-bad: #FF5B52; --x-highlight: color-mix(in oklch, var(--x-accent) 62%, var(--x-surface)); --x-on-highlight: var(--x-ink); --x-badge: color-mix(in oklch, var(--x-accent) 42%, var(--x-surface)); --x-bar: var(--x-surface); --x-bar-opaque: var(--x-surface); --x-knob: var(--x-surface); --x-radius-card: 20px; --x-radius-control: 10px; --x-radius-group: 20px; --x-radius-pill: 999px; --x-radius-sheet: 24px; --x-radius-well: 12px; --x-clip-blade: 22px; --x-border-hairline: 1px; --x-border-card: 1.5px; --x-border-emphasis: 1.5px; --x-space-screen-margin: 16px; --x-space-row-min: 44px; --x-space-row-comfortable: 52px; --x-space-card-pad: 17px; --x-space-group-gap: 14px; --x-space-section-gap: 64px; --x-space-tab-bar-height: 83px; --x-space-nav-bar-height: 56px; --x-size-card-w: 300px; --x-size-card-h: 375px; --x-size-specimen-w: 340px; --x-size-specimen-h: 425px; --x-size-tile-w: 170px; --x-size-photo-well: 112px; --x-size-mini-w: 96px; --x-size-mini-h: 60px; --x-size-initials-well: 36px; --x-size-ring-full: 96px; --x-size-ring-small: 112px; --x-size-ring-micro: 48px; --x-size-sheet-sm: 420px; --x-size-sheet-md: 460px; --x-size-sheet-lg: 520px; --x-size-sheet-xl: 560px; --x-size-sheet-2xl: 700px; --x-space-sheet-inset: 16px; --x-size-control: 48px; --x-size-control-wide: 36px; --x-size-rail: 56px; --x-size-strip: 34px; --x-size-glance-cell: 76px; --x-shadow-1: none; --x-shadow-2: none; --x-motion-dur-press: 120ms; --x-motion-dur-sheet: 200ms; --x-motion-dur-flip: 620ms; --x-motion-ease-standard: cubic-bezier(.16,1,.3,1); --x-motion-ease-flip: cubic-bezier(.2,.8,.2,1); --x-motion-press-scale: 0.97; --x-motion-dur-state: 160ms; --x-blur-bar: 20px; }