/** * AA tokens. Canonical values from granular-video / audio-paulxstretch. * Visio density: [data-aa-variant="tool"] on . * * Prefer --aa-* in new CSS. Short aliases (--bg, --text, …) keep older * instrument projects drop-in compatible. */ :root, .aa { --aa-bg: #0b0b0d; --aa-bg-2: #131316; --aa-bg-3: #1a1a1f; --aa-border: rgba(255, 255, 255, 0.055); --aa-border-2: rgba(255, 255, 255, 0.1); --aa-text: #ddd8cc; --aa-muted: rgba(221, 216, 204, 0.32); --aa-accent: rgba(255, 255, 255, 0.55); --aa-danger: #e84a4a; --aa-danger-soft: rgba(232, 74, 74, 0.12); --aa-danger-text: #f0a0a0; --aa-fill: rgba(255, 255, 255, 0.08); --aa-knob-track: rgba(255, 255, 255, 0.07); --aa-knob-value: rgba(255, 255, 255, 0.55); --aa-knob-needle: #fff; --aa-mono: "Martian Mono", ui-monospace, monospace; --aa-serif: "Instrument Serif", serif; --aa-ui: var(--aa-mono); --aa-radius: 8px; --aa-radius-btn: 5px; --aa-radius-chip: 3px; --aa-label-size: 8px; --aa-value-size: 9px; --aa-button-size: 10px; --aa-title-size: 22px; --aa-control-gap: 4px; --aa-pad: 14px 18px; --aa-knob-size: 44px; --bg: var(--aa-bg); --bg2: var(--aa-bg-2); --bg3: var(--aa-bg-3); --panel: var(--aa-bg-2); --panel-2: var(--aa-bg-3); --border: var(--aa-border); --border2: var(--aa-border-2); --line: var(--aa-border-2); --line-light: var(--aa-border-2); --text: var(--aa-text); --muted: var(--aa-muted); --dim: var(--aa-muted); --accent: var(--aa-accent); --danger: var(--aa-danger); --mono: var(--aa-mono); --serif: var(--aa-serif); --font: var(--aa-ui); --radius: var(--aa-radius); --label-size: var(--aa-label-size); --button-size: var(--aa-button-size); --control-gap: var(--aa-control-gap); color-scheme: dark; font-family: var(--aa-ui); } /* visio: hard B&W, no radius, Telegraf. One hue — record/render red. */ [data-aa-variant="tool"] { --aa-bg: #000000; --aa-bg-2: #111111; --aa-bg-3: #1a1a1a; --aa-border: #2e2e2e; --aa-border-2: #3a3a3a; --aa-text: #ffffff; --aa-muted: #a0a0a0; --aa-accent: #ffffff; --aa-danger: #d61f2c; --aa-danger-soft: rgba(214, 31, 44, 0.14); --aa-danger-text: #ffffff; --aa-fill: #1a1a1a; --aa-knob-track: rgba(255, 255, 255, 0.07); --aa-knob-value: rgba(255, 255, 255, 0.55); --aa-knob-needle: #fff; --aa-mono: Telegraf, system-ui, -apple-system, sans-serif; --aa-serif: Telegraf, system-ui, -apple-system, sans-serif; --aa-ui: Telegraf, system-ui, -apple-system, sans-serif; --aa-radius: 0; --aa-radius-btn: 0; --aa-radius-chip: 0; --aa-label-size: 9px; }