/* =================================================================== InduIndex app design tokens — from the Claude Design project "Alarm Analyzer" (warm paper surfaces, signal-amber accent, IBM Plex). Light is the default; [data-theme="dark"] on flips the ramp (persisted by static/js/app/shell.js). [data-density="compact"] is reserved for a denser mode — only --pad/--gap change. Text ramps clear WCAG AA (4.5:1) on --bg/--surface/--surface-2; --text-on-accent is dark ink that clears AA on the amber fill in both themes, so it does not flip. The landing's dark "instrument panel" island hardcodes this file's dark values (see .lp-body in static/css/landing.css) — keep in sync. =================================================================== */ :root { --bg: #f7f6f3; --surface: #ffffff; --surface-2: #f1efec; --surface-3: #eae7e2; --border: #e6e3dd; --border-2: #d7d3cc; --text: #221f1b; --text-2: #625d55; --text-3: #6f6a62; /* The accent is a ramp, not one colour: one hue (41°) at three lightnesses, one per job. A single value can't serve all three — a yellow bright enough to be worth having as a fill is far under contrast as a hairline or as link text. --accent fills only (buttons, bars, dots, the mark). The gate here is --text-on-accent ON the fill: 9.87:1. --accent-line borders, focus rings, 2px ticks. >=3:1 on every light ground incl. --surface-3 (worst 3.02:1). --accent-text real TEXT only — links, kickers, numerals. >=4.5:1 on every light ground incl. --accent-soft (worst 4.53:1). `color` is the one property that spans two rungs, because it drives both text and — through currentColor — SVG strokes. An icon is non-text UI at 3:1, so it takes --accent-line; only glyphs a person reads take --accent-text. Where one element holds both (the nav rail's active item, the file drop zones), colour the container for the text and re-point the svg. Routing icons to the text rung is not "safer" — it just makes them needlessly dark, which is exactly what shipped and got caught. Dark theme collapses all three back to the fill value — it clears 7.16:1 on the darkest ground it lands on. */ --accent: #f5b325; --accent-line: #b07a08; --accent-text: #8a6006; --text-on-accent: #1b1408; /* A 13% tint of --accent over --bg. Was #f8ecd6, which was a tint of the retired #c2740a and so carried that colour's browner cast. */ --accent-soft: #f7edd8; --ok: #3f7a54; --ok-soft: #e7efe8; --warn: #b9770f; --warn-soft: #f8eed9; --crit: #b24a2b; --crit-soft: #f7e4dc; --shadow: 0 1px 2px rgba(40, 30, 20, .04), 0 2px 8px rgba(40, 30, 20, .05); --pad: 26px; --gap: 18px; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --nav-w: 64px; --nav-w-expanded: 212px; --header-h: 52px; } [data-theme="dark"] { --bg: #18150f; --surface: #221e17; --surface-2: #2a251d; --surface-3: #332d24; --border: #37312a; --border-2: #4a4137; --text: #ece7de; --text-2: #a49d90; --text-3: #9e9687; /* No ramp needed on dark: the fill yellow clears 4.5:1 on every dark ground (worst is --accent-soft at 7.16:1), so all three roles are it. */ --accent: #f5b325; --accent-line: #f5b325; --accent-text: #f5b325; --accent-soft: #352a12; /* same 13% recipe, tinted over the dark --bg */ --ok: #6fae82; --ok-soft: #24302a; --warn: #e0a041; --warn-soft: #372c18; --crit: #dc7a55; --crit-soft: #392420; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .28); } [data-density="compact"] { --pad: 16px; --gap: 12px; }