/* ============================================================ Lumotia v0.3 — Tactile Quietware tokens. Phase 1 of the v0.3 release. Tokens only. No component refactors, no layout changes, no behavioural shifts. The new palette and typography activate only when html[data-design="quietware"] is set. When the attribute is absent the runtime app behaves exactly as it did in v0.2. Activation paths: 1. Manual: add data-design="quietware" to via dev tools. 2. Build flag (Phase 2): VITE_LUMOTIA_QUIETWARE=1 wires the attribute through +layout.svelte automatically. -------------------------------------------------------------- Phase 4g — four-tier semantic role tokens (2026-05-15 round 5). One semantic role colour cannot do every UI job. Forcing --color-caution to be both bright yellow (signal) AND accessible text on cream (ochre) collapses the visible identity. Instead, each role has four tier-specific tokens: signal the brand-true colour for the role. Used for left bars, large icons, dots, status pills, focus rings. Looks like the role at a glance. ink accessible text variant. Used ONLY when text itself must carry the role colour (small chips, badges). WCAG AA 4.5:1 on the surface it sits on. border middle value. Visible as a notice or chip outline but does not need to clear AA-text contrast. bg hand-tuned pale tint surface. NOT a generic color-mix derivation, because that produces muddy results in mixed-luminance themes. Each value is picked per theme so the surface stays clean. Usage layer on top: --notice-{role}-{bar,icon,border,bg,title,body}. Components reference the usage tokens so future per-usage re-tuning does not require touching every site. The source hue tokens stay (encoding role identity from Jake's color.adobe.com palette). They are NEVER used in the runtime UI directly. Use the tiered tokens. Brand accent (--color-accent, copper-clay) remains distinct from semantic yellow. Brand is action / Lumotia identity. Yellow is caution / review. Typography stack (V4 pairing, locked 2026-05-15): Work Sans -> body, UI, controls, headers Young Serif -> brand moments only (wordmark, empty-state hook) JetBrains Mono -> logs, paths, model IDs Source brief: docs/release/v0.3-tactile-quietware.md. ============================================================ */ @font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-variable.woff2') format('woff2-variations'), url('/fonts/work-sans-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans-italic-variable.woff2') format('woff2-variations'), url('/fonts/work-sans-italic-variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Young Serif'; src: url('/fonts/young-serif.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================ Phase 4j — colour-grammar correction (2026-05-15 round 8). Five source hues + five complement sources. Never used directly in component CSS; consumed only by role and component tokens. Red record / error / destructive / blocked Blue primary app action / info / processing Green ready / saved / success Yellow caution / needs review / pending Orange Lumotia brand mark only, NOT default action Component tokens are defined below in each theme block. Tonal scales (red-50 .. red-950 etc.) will land in a focused future commit; for now the component layer picks hand-tuned hex values verified at WCAG AA on their target surface. ============================================================ */ :root[data-design="quietware"] { --source-red: #FF0700; --source-yellow: #FFCD00; --source-green: #00FF56; --source-blue: #000AFF; --source-orange-brand: #F0620A; --red-complement-source: #00F8FF; --yellow-complement-source: #0032FF; --green-complement-source: #FF00A9; --blue-complement-source: #FFF500; --orange-complement-source: #0A98F0; /* Legacy alias retained for the v0.2 path. */ --semantic-red-source: var(--source-red); --semantic-yellow-source: var(--source-yellow); --semantic-green-source: var(--source-green); --semantic-blue-source: var(--source-blue); } /* ============================================================ Root-level fallback notice tokens. When quietware is OFF the v0.2 surface still gets sensible notice-* values derived from the v0.2 --color-{role} tokens via color-mix. Quietware blocks below override these with hand-tuned per-mode values. ============================================================ */ :root { --notice-info-bar: var(--color-info); --notice-info-icon: var(--color-info); --notice-info-border: color-mix(in oklab, var(--color-info) 40%, transparent); --notice-info-bg: color-mix(in oklab, var(--color-info) 8%, transparent); --notice-danger-bar: var(--color-danger); --notice-danger-icon: var(--color-danger); --notice-danger-border: color-mix(in oklab, var(--color-danger) 40%, transparent); --notice-danger-bg: color-mix(in oklab, var(--color-danger) 8%, transparent); --notice-success-bar: var(--color-success); --notice-success-icon: var(--color-success); --notice-success-border: color-mix(in oklab, var(--color-success) 40%, transparent); --notice-success-bg: color-mix(in oklab, var(--color-success) 8%, transparent); --notice-caution-bar: var(--color-caution); --notice-caution-icon: var(--color-caution); --notice-caution-border: color-mix(in oklab, var(--color-caution) 40%, transparent); --notice-caution-bg: color-mix(in oklab, var(--color-caution) 8%, transparent); /* v0.2 fallback button-component tokens. When quietware is off these keep components rendering with their existing v0.2 colours via the v0.2 --color-accent / --color-danger semantic tokens. Quietware blocks below override with the Phase 4j specific values. */ --button-record-bg: var(--color-danger); --button-record-fg: #FFFFFF; --button-record-border: var(--color-danger); --button-record-wire: transparent; --button-primary-bg: var(--color-accent); --button-primary-fg: #FFFFFF; --button-primary-border: var(--color-accent); --button-primary-wire: transparent; --button-danger-bg: var(--color-danger); --button-danger-fg: #FFFFFF; --button-danger-border: var(--color-danger); --button-danger-wire: transparent; --button-success-bg: var(--color-success); --button-success-fg: #FFFFFF; --button-success-border: var(--color-success); --button-success-wire: transparent; --button-caution-bg: var(--color-caution); --button-caution-fg: #000000; --button-caution-border: var(--color-caution); --button-caution-wire: transparent; --brand-accent: var(--color-accent); --wire-width: 0px; --wire-width-focus: 2px; --wire-opacity-dark: 0; --wire-opacity-light: 0; --wire-opacity-focus: 0; --wire-style: solid; --focus-ring-color: var(--color-accent); } /* ============================================================ Quietware — dark mode default. Warm brown-charcoal atmosphere. ============================================================ */ :root[data-design="quietware"] { /* Phase 4l — Wren palette revision, 2026/05/15. Role signals swapped to Tiger Flame / Banana Cream / Sea Green / Steel Azure (dark) and the FILL/TEXT pair set (light). Coffee Bean bg candidate #1F0812 was tested live and rejected — its R/G/B channels (31/8/18) sit on a purple-leaning hue, reading as aubergine in the running window, not the labelled warm brown. Bg + grain held at the prior values pending a true coffee-brown candidate. Steel Azure contrast on dark fails AA (see notice on --color-info-signal below) regardless of bg choice — retune of the info ink/signal split is owed separately. */ --color-bg: #12100E; --color-bg-elevated: #1A1713; --color-bg-card: #211D18; --color-bg-input: #181510; --color-border: #4A4035; --color-border-subtle: #2C261F; --color-text: #F3EFE7; --color-text-secondary: #BDB6A9; --color-text-tertiary: #908779; /* Phase 4j — primary action is BLUE; brand-accent (orange) defined in the component-tokens block below and restricted to logo / brand surfaces. --color-accent stays as the convenience alias for primary action so v0.2 component callers (bg-accent etc.) get blue under quietware. */ --color-accent: var(--blue-700); --color-accent-hover: var(--blue-800); --color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent); --color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent); /* Four-tier role tokens. Signal carries the role's identity (Tiger Flame / Banana Cream / Sea Green / Steel Azure under Phase 4l); ink lightens for text legibility on dark; border is a middle value; bg is a hand-tuned dark tint, not a color-mix. Borders + bg tints retained from Phase 4j — they go with the hue family rather than the specific shade. */ --color-info-signal: #064789; --color-info-ink: #9CC6FF; --color-info-border: #4D8DFF; --color-info-bg: #101A2A; --color-danger-signal: #F26430; --color-danger-ink: #FF9B96; --color-danger-border: #FF5A52; --color-danger-bg: #2A1412; --color-success-signal: #519872; --color-success-ink: #7DFFA8; --color-success-border: #00D94A; --color-success-bg: #0D2415; --color-caution-signal: #FCEC52; --color-caution-ink: #FFE066; --color-caution-border: #FFCD00; --color-caution-bg: #29210A; /* Backward-compat aliases. v0.2 callers of --color-danger etc. get the signal variant by default. New code should reach for the specific tier. */ --color-info: var(--color-info-signal); --color-danger: var(--color-danger-signal); --color-success: var(--color-success-signal); --color-caution: var(--color-caution-signal); --color-warning: var(--color-caution-signal); /* Notice usage tokens. Components subscribe to these so future per-usage retuning does not require touching every site. In dark mode the notice icon uses signal (bright on dark surface); title/body always neutral text. */ --notice-info-bar: var(--color-info-signal); --notice-info-icon: var(--color-info-signal); --notice-info-border: var(--color-info-border); --notice-info-bg: var(--color-info-bg); --notice-danger-bar: var(--color-danger-signal); --notice-danger-icon: var(--color-danger-signal); --notice-danger-border: var(--color-danger-border); --notice-danger-bg: var(--color-danger-bg); --notice-success-bar: var(--color-success-signal); --notice-success-icon: var(--color-success-signal); --notice-success-border: var(--color-success-border); --notice-success-bg: var(--color-success-bg); --notice-caution-bar: var(--color-caution-signal); --notice-caution-icon: var(--color-caution-signal); --notice-caution-border: var(--color-caution-border); --notice-caution-bg: var(--color-caution-bg); --color-sidebar: #0F0E0C; --color-nav-active: #211D18; --color-hover: #1A1713; --color-overlay-dim: rgba(15, 14, 12, 0.7); --font-family-body: 'Work Sans', system-ui, sans-serif; --font-family-display: 'Young Serif', serif; --font-family-mono: 'JetBrains Mono', monospace; /* Phase 4e behavioural tokens for the HC rendering contract. */ --grain-opacity: 0.06; --shadow-strength: 1; --border-width-control: 1px; --focus-ring-width: 2px; --panel-radius: 8px; --quietware-texture-opacity: var(--grain-opacity); --quietware-texture-color: rgba(243, 239, 231, 1); /* ---------------------------------------------------------- Phase 4j — wirelines (renamed from counterlines) and component tokens for buttons (round-8 spec). Wireline levels (unchanged): Level 0 none panels, notices (default), content, disabled Level 1 quiet controls, chips, active nav Level 2 focus keyboard focus, recording state Opacity bumped per round-8 (was 0.32/0.22/0.85; now 0.75/0.6/1.0) so Level 1 reads at standard viewing without becoming noisy. ---------------------------------------------------------- */ --wire-width: 1px; --wire-width-active: 2px; --wire-width-focus: 2px; --wire-opacity-dark: 0.75; --wire-opacity-light: 0.6; --wire-opacity-active: 0.9; --wire-opacity-focus: 1; --wire-opacity: var(--wire-opacity-dark); /* mode-aware resolver */ --wire-style: solid; /* Legacy counterline aliases retained for Phase 4h/4i opt-in path. */ --counterline-width: var(--wire-width); --counterline-width-focus: var(--wire-width-focus); --counterline-opacity-dark: var(--wire-opacity-dark); --counterline-opacity-light: var(--wire-opacity-light); --counterline-opacity-focus: var(--wire-opacity-focus); /* Component tokens — consume scale tokens only. Never raw hex. Phase 4k: scale tokens defined in v0.3-quietware-scales.css. */ /* Record. Red mid-step on dark surface clears AA on white text. */ --button-record-bg: var(--red-600); --button-record-fg: #FFFFFF; --button-record-border: var(--red-700); --button-record-wire: var(--red-complement-400); /* Primary app action. Blue 600 on dark, AA on white. */ --button-primary-bg: var(--blue-700); --button-primary-fg: #FFFFFF; --button-primary-border: var(--blue-800); --button-primary-wire: var(--blue-complement-400); /* Destructive shares record fill but separate token for semantic clarity. */ --button-danger-bg: var(--red-600); --button-danger-fg: #FFFFFF; --button-danger-border: var(--red-700); --button-danger-wire: var(--red-complement-400); /* Success. green-800 chosen so white foreground clears AA 4.5:1. */ --button-success-bg: var(--green-800); --button-success-fg: #FFFFFF; --button-success-border: var(--green-900); --button-success-wire: var(--green-complement-400); /* Caution. Yellow 400 — bright enough to read, paired with near-black foreground (yellow-950) so text passes AA on the yellow surface. */ --button-caution-bg: var(--yellow-400); --button-caution-fg: var(--yellow-950); --button-caution-border: var(--yellow-600); --button-caution-wire: var(--yellow-complement-500); /* Neutral — non-semantic, low-priority controls. */ --button-neutral-bg: var(--color-bg-elevated); --button-neutral-fg: var(--color-text); --button-neutral-border: var(--color-border-subtle); --button-neutral-wire: transparent; /* Disabled — flat, low-saturation, never carries a wireline. */ --button-disabled-bg: var(--color-bg-elevated); --button-disabled-fg: var(--color-text-tertiary); --button-disabled-border: var(--color-border-subtle); --button-disabled-wire: transparent; /* Progress component tokens. Track + fill per role. Default progress = primary blue; success / caution / danger explicit. Disk-space reads neutral by default and only escalates per threshold. */ /* Progress fills shifted lighter on dark surfaces so the bar reads on the dark elevated track. */ --progress-track: var(--color-bg-elevated); --progress-download-fill: var(--blue-400); --progress-transcribing-fill: var(--blue-400); --progress-success-fill: var(--green-500); --progress-caution-fill: var(--yellow-500); --progress-danger-fill: var(--red-500); --progress-disk-fill: var(--color-text-tertiary); --progress-disk-caution-fill: var(--yellow-500); --progress-disk-danger-fill: var(--red-500); /* Brand accent — orange-500. Restricted to logo / brand surfaces. */ --brand-accent: var(--orange-500); --brand-accent-strong: var(--orange-600); --brand-wire: var(--orange-complement-400); /* Notice counterline tokens retired from defaults (LumotiaNotice stays opt-in via the `counterline` prop). Tokens kept available for the opt-in path; same value pattern as Phase 4i. */ --notice-info-counterline: color-mix(in srgb, var(--source-blue) calc(var(--wire-opacity-dark) * 100%), transparent); --notice-danger-counterline: color-mix(in srgb, var(--red-complement-source) calc(var(--wire-opacity-dark) * 100%), transparent); --notice-success-counterline: color-mix(in srgb, var(--green-complement-source) calc(var(--wire-opacity-dark) * 100%), transparent); --notice-caution-counterline: color-mix(in srgb, var(--yellow-complement-source) calc(var(--wire-opacity-dark) * 100%), transparent); --button-brand-counterline: var(--brand-wire); /* Focus ring colour — defaults to primary blue. Components can override per-context (eg. record-button focus could use red). */ --focus-ring-color: var(--button-primary-bg); } [data-wire-style="dotted"] { --wire-style: dotted; } /* ============================================================ Quietware — light mode. Warm paper. Caution signal stays bright #FFCD00; ink #7A5D00 only appears when caution text itself must be coloured. ============================================================ */ :root[data-design="quietware"][data-theme="light"] { --color-bg: #FBF8F2; --color-bg-elevated: #F6F1EA; --color-bg-card: #FFFDF8; --color-bg-input: #F4EFE7; --color-border: #897D70; --color-border-subtle: #D8D0C4; --color-text: #1D1B18; --color-text-secondary: #5E574C; --color-text-tertiary: #74685B; /* Phase 4k — --color-accent points at scale-blue under light mode. Brand accent (orange) defined alongside component tokens below. */ --color-accent: var(--blue-700); --color-accent-hover: var(--blue-800); --color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent); --color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent); /* Four-tier role tokens, light mode. Phase 4l — Wren palette revision 2026/05/15. Signal = FILL (vivid), ink = TEXT-safe darker sibling that passes 4.5:1 on cream. Saturation/lightness targeted on the locked Banana Cream anchor #D5A021 (S 73%, L 48%). Borders + bg tints unchanged — they go with the hue family. */ --color-info-signal: #217AD5; --color-info-ink: #1F73C9; --color-info-border: #3A6BFF; --color-info-bg: #EEF3FF; --color-danger-signal: #D55121; --color-danger-ink: #C54B1F; --color-danger-border: #E13A32; --color-danger-bg: #FFF0EF; --color-success-signal: #21D575; --color-success-ink: #148348; --color-success-border: #159947; --color-success-bg: #EAF8EE; --color-caution-signal: #D5A021; --color-caution-ink: #7E7414; --color-caution-border: #D9A900; --color-caution-bg: #FFF7D6; --color-info: var(--color-info-signal); --color-danger: var(--color-danger-signal); --color-success: var(--color-success-signal); --color-caution: var(--color-caution-signal); --color-warning: var(--color-caution-signal); /* In light mode the notice icon uses ink (the dark variant) so it reads clearly against the pale -bg tint. Signal would wash out. */ --notice-info-bar: var(--color-info-signal); --notice-info-icon: var(--color-info-ink); --notice-info-border: var(--color-info-border); --notice-info-bg: var(--color-info-bg); --notice-danger-bar: var(--color-danger-signal); --notice-danger-icon: var(--color-danger-ink); --notice-danger-border: var(--color-danger-border); --notice-danger-bg: var(--color-danger-bg); --notice-success-bar: var(--color-success-signal); --notice-success-icon: var(--color-success-ink); --notice-success-border: var(--color-success-border); --notice-success-bg: var(--color-success-bg); --notice-caution-bar: var(--color-caution-signal); --notice-caution-icon: var(--color-caution-ink); --notice-caution-border: var(--color-caution-border); --notice-caution-bg: var(--color-caution-bg); --color-sidebar: #F3EEE6; --color-nav-active: #E8E2D6; --color-hover: #EAE4D8; --color-overlay-dim: rgba(29, 27, 24, 0.55); --grain-opacity: 0.07; --quietware-texture-opacity: var(--grain-opacity); --quietware-texture-color: rgba(29, 27, 24, 1); /* Phase 4k — light-mode component tokens consume scale tokens at slightly deeper steps for AA on cream paper. */ --button-record-bg: var(--red-700); --button-record-fg: #FFFFFF; --button-record-border: var(--red-800); --button-record-wire: var(--red-complement-400); --button-primary-bg: var(--blue-700); --button-primary-fg: #FFFFFF; --button-primary-border: var(--blue-800); --button-primary-wire: var(--blue-complement-400); --button-danger-bg: var(--red-700); --button-danger-fg: #FFFFFF; --button-danger-border: var(--red-800); --button-danger-wire: var(--red-complement-400); --button-success-bg: var(--green-800); --button-success-fg: #FFFFFF; --button-success-border: var(--green-900); --button-success-wire: var(--green-complement-400); --button-caution-bg: var(--yellow-400); --button-caution-fg: var(--yellow-950); --button-caution-border: var(--yellow-700); --button-caution-wire: var(--yellow-complement-500); --button-neutral-bg: var(--color-bg-elevated); --button-neutral-fg: var(--color-text); --button-neutral-border: var(--color-border-subtle); --button-neutral-wire: transparent; --button-disabled-bg: var(--color-bg-elevated); --button-disabled-fg: var(--color-text-tertiary); --button-disabled-border: var(--color-border-subtle); --button-disabled-wire: transparent; /* Progress fills shifted darker on cream so the bar reads on the pale paper track. Success uses green-800 to clear 3:1 on cream. */ --progress-track: var(--color-bg-elevated); --progress-download-fill: var(--blue-700); --progress-transcribing-fill: var(--blue-700); --progress-success-fill: var(--green-800); --progress-caution-fill: var(--yellow-600); --progress-danger-fill: var(--red-700); --progress-disk-fill: var(--color-text-tertiary); --progress-disk-caution-fill: var(--yellow-600); --progress-disk-danger-fill: var(--red-700); --brand-accent: var(--orange-500); --brand-accent-strong: var(--orange-700); --brand-wire: var(--orange-complement-400); --wire-opacity: var(--wire-opacity-light); /* light-mode resolver */ /* Legacy notice counterline tokens — opt-in only. */ --notice-info-counterline: color-mix(in srgb, var(--source-blue) calc(var(--wire-opacity-light) * 100%), transparent); --notice-danger-counterline: color-mix(in srgb, var(--red-complement-source) calc(var(--wire-opacity-light) * 100%), transparent); --notice-success-counterline: color-mix(in srgb, var(--green-complement-source) calc(var(--wire-opacity-light) * 100%), transparent); --notice-caution-counterline: color-mix(in srgb, var(--yellow-complement-source) calc(var(--wire-opacity-light) * 100%), transparent); --button-brand-counterline: var(--brand-wire); } /* ============================================================ Quietware — high-contrast. Simple and brutal. All notice -bg goes transparent; -bar/-icon/-border collapse to a single source colour per role. Semantic recognition by colour identity + label + icon shape, not by ambient tinting. ============================================================ */ :root[data-design="quietware"][data-contrast="high"], :root[data-design="quietware"][data-theme="light"][data-contrast="high"] { --color-bg: #FFFFFF; --color-bg-elevated: #FFFFFF; --color-bg-card: #FFFFFF; --color-bg-input: #FFFFFF; --color-border: #000000; --color-border-subtle: #000000; --color-text: #000000; --color-text-secondary: #000000; --color-text-tertiary: #000000; --color-accent: #005FCC; --color-accent-hover: #004BA0; --color-accent-subtle: transparent; --color-accent-glow: transparent; --color-info-signal: #000AFF; --color-info-ink: #000AFF; --color-info-border: #000AFF; --color-info-bg: transparent; --color-danger-signal: #FF0700; --color-danger-ink: #FF0700; --color-danger-border: #FF0700; --color-danger-bg: transparent; --color-success-signal: #00B83E; --color-success-ink: #007A2B; --color-success-border: #00B83E; --color-success-bg: transparent; --color-caution-signal: #FFCD00; --color-caution-ink: #7A5D00; --color-caution-border: #FFCD00; --color-caution-bg: transparent; --color-info: var(--color-info-signal); --color-danger: var(--color-danger-signal); --color-success: var(--color-success-signal); --color-caution: var(--color-caution-signal); --color-warning: var(--color-caution-signal); --notice-info-bar: var(--color-info-signal); --notice-info-icon: var(--color-info-signal); --notice-info-border: var(--color-info-border); --notice-info-bg: transparent; --notice-danger-bar: var(--color-danger-signal); --notice-danger-icon: var(--color-danger-signal); --notice-danger-border: var(--color-danger-border); --notice-danger-bg: transparent; --notice-success-bar: var(--color-success-signal); --notice-success-icon: var(--color-success-ink); --notice-success-border: var(--color-success-border); --notice-success-bg: transparent; --notice-caution-bar: var(--color-caution-signal); --notice-caution-icon: var(--color-caution-ink); --notice-caution-border: var(--color-caution-border); --notice-caution-bg: transparent; --color-sidebar: #FFFFFF; --color-nav-active: #000000; --color-hover: #F0F0F0; --color-overlay-dim: rgba(0, 0, 0, 0.85); --grain-opacity: 0; --shadow-strength: 0; --border-width-control: 2px; --focus-ring-width: 3px; --panel-radius: 8px; --quietware-texture-opacity: 0; --quietware-texture-color: rgba(0, 0, 0, 0); /* HC contract: counterlines disabled for normal states. The HC focus ring (2 px, full strong-blue) IS the tactile detail in this mode. */ --counterline-width: 0; --counterline-width-focus: 2px; --counterline-opacity-dark: 0; --counterline-opacity-light: 0; --counterline-opacity-focus: 1; --notice-info-counterline: transparent; --notice-danger-counterline: transparent; --notice-success-counterline: transparent; --notice-caution-counterline: transparent; --button-brand-counterline: transparent; --button-danger-counterline: transparent; --button-info-counterline: transparent; --button-success-counterline: transparent; --button-caution-counterline: transparent; /* HC focus ring is the brand-strong blue, not a complement. */ --focus-ring-color: #005FCC; /* HC progress fills — track is white, fills must be dark enough for 3:1 contrast. (HC-dark sub-block overrides to bright shades for the black surface.) */ --progress-track: var(--color-bg-elevated); --progress-download-fill: var(--blue-700); --progress-transcribing-fill: var(--blue-700); --progress-success-fill: var(--green-800); --progress-caution-fill: var(--yellow-700); --progress-danger-fill: var(--red-700); } /* Dark-base high-contrast — black background, white borders. Used when the user explicitly wants HC inside the dark theme. */ :root[data-design="quietware"][data-contrast="high"]:not([data-theme="light"]) { --color-bg: #000000; --color-bg-elevated: #000000; --color-bg-card: #000000; --color-bg-input: #000000; --color-border: #FFFFFF; --color-border-subtle: #FFFFFF; --color-text: #FFFFFF; --color-text-secondary: #FFFFFF; --color-text-tertiary: #FFFFFF; --color-accent: #75A8F0; --color-accent-hover: #5C92E0; /* HC dark inverts the contrast direction: signals are the lighter end of each hue, not the saturated source. -bg stays transparent so the black surface shows through directly. */ --color-info-signal: #8AB4F8; --color-info-ink: #8AB4F8; --color-info-border: #8AB4F8; --color-info-bg: transparent; --color-danger-signal: #FF8A8A; --color-danger-ink: #FF8A8A; --color-danger-border: #FF8A8A; --color-danger-bg: transparent; --color-success-signal: #79D59B; --color-success-ink: #79D59B; --color-success-border: #79D59B; --color-success-bg: transparent; --color-caution-signal: #F2C94C; --color-caution-ink: #FFE066; --color-caution-border: #F2C94C; --color-caution-bg: transparent; --color-info: var(--color-info-signal); --color-danger: var(--color-danger-signal); --color-success: var(--color-success-signal); --color-caution: var(--color-caution-signal); --color-warning: var(--color-caution-signal); --notice-info-icon: var(--color-info-signal); --notice-danger-icon: var(--color-danger-signal); --notice-success-icon: var(--color-success-signal); --notice-caution-icon: var(--color-caution-signal); --color-sidebar: #000000; --color-nav-active: #FFFFFF; --color-hover: #1A1A1A; /* HC-dark progress fills — track is black, fills must be light for 3:1. */ --progress-download-fill: var(--blue-300); --progress-transcribing-fill: var(--blue-300); --progress-success-fill: var(--green-400); --progress-caution-fill: var(--yellow-400); --progress-danger-fill: var(--red-400); --progress-disk-fill: var(--color-text-secondary); --progress-disk-caution-fill: var(--yellow-400); --progress-disk-danger-fill: var(--red-400); } /* ============================================================ Static grain overlay. Reads --grain-opacity. Zero in HC mode by contract. Fixed-position so it does not scroll. ============================================================ */ :root[data-design="quietware"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml;utf8,"); opacity: var(--grain-opacity); mix-blend-mode: overlay; } /* ============================================================ Reduced motion. Honour OS preference; quietware rules require it. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root[data-design="quietware"] * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }