/* @level primitive */ /* * tokens.css — the design-system foundation as CSS custom properties. This is the * canonical, EFFECTIVE source of truth for the app's appearance: every component * reads the dash-named `--m-*` vars declared here. * * ── Two layers ─────────────────────────────────────────────────────────────── * Primitives (--m-color-*, --m-size-*) — the raw palette + scale. * Semantic (--m-surface-*, --m-content-*, --m-border-*, --m-accent-*, …) — * intent-bearing names. Components use THESE, never a raw rung, so a * palette tweak is one edit here, not a sweep across the estate. * * ── The design-system arc (2026-07-06, P1) ─────────────────────────────────── * Before P1 this set was too sparse (5 neutrals, 2 surfaces, 2 borders, 2 status; * no elevation / motion / focus) so ~30 editors invented 639 raw hex values to say * "a hover surface" or "a subtle border." P1 fills the rungs: a 12-step neutral * ramp, a five-level surface elevation model, three border weights, the accent * scale, semantic status (incl. a record red), radius / elevation / motion / focus * / control-height scales. controls.css (the canonical control law) and every new * or touched surface reference these; the estate-wide migration off raw hex is the * later P2/P3 work. The ONE deliberate, signed-off visible change in P1 is the * accent: the unified brand GREEN, refined a touch richer than the old neon mint — * every `--m-interactive-primary` / accent alias now resolves to it, so the whole * app speaks one green. * * ── Theming note (why these are the source of truth, not tokens.json) ───────── * The kernel ALSO emits a `t.dom.set_var` Effect per token on theme change — but * those land on DOT-named vars (`--m-surface.base`) while every component reads the * DASH-named vars here (`--m-surface-base`). The two namespaces are disjoint, so the * runtime theme emission currently reaches nothing and the app renders purely from * these values. Wiring that pipeline (dot→dash) so tokens.json drives live * dark/light/warm theming is the P4 "theming" pass; until then tokens.css is * authoritative and dark-only. See docs/design-system.md. */ :root { color-scheme: dark; /* ══ Primitives ════════════════════════════════════════════════════════════ */ /* Neutral ramp — cool (hue ~222, a slight blue bias: chosen, not grey), 12 steps. * Components read the SEMANTIC names below; these rungs are the palette they map to. */ --m-color-neutral-0: hsl(224 24% 4.5%); /* scrim / deepest */ --m-color-neutral-50: hsl(222 20% 7.5%); /* surface: base (the card) */ --m-color-neutral-100: hsl(222 16% 11%); /* surface: raised */ --m-color-neutral-150: hsl(222 14% 14%); /* surface: overlay / hover */ --m-color-neutral-200: hsl(222 12% 18%); /* surface: pressed */ --m-color-neutral-300: hsl(222 10% 24%); /* border: strong */ --m-color-neutral-400: hsl(221 9% 34%); /* border: emphasis */ --m-color-neutral-500: hsl(220 8% 47%); /* content: tertiary */ --m-color-neutral-600: hsl(220 9% 60%); /* content: muted */ --m-color-neutral-700: hsl(219 11% 73%); /* content: secondary */ --m-color-neutral-850: hsl(218 14% 88%); --m-color-neutral-900: hsl(216 18% 95%); /* content: primary */ /* Accent — the brand green, kept as the ONE accent (a premium refinement of the * old neon mint). `success` happens to share it; status colours stay separate. */ --m-color-accent-500: hsl(146 58% 60%); /* the accent (alias below) */ --m-color-accent-300: hsl(148 40% 42%); /* dim / muted accent */ /* Semantic status — SEPARATE from the accent (a warning/record/info can't be green). */ --m-color-status-success: hsl(146 58% 60%); --m-color-status-danger: hsl( 4 82% 69%); --m-color-status-warning: hsl( 38 92% 62%); --m-color-status-record: hsl( 2 74% 60%); --m-color-status-info: hsl(208 78% 66%); /* Spacing — a 4px rhythm. */ --m-size-space-1: 4px; --m-size-space-2: 8px; --m-size-space-3: 12px; --m-size-space-4: 16px; --m-size-space-5: 20px; --m-size-space-6: 24px; --m-size-space-7: 32px; --m-size-font-sm: 13px; --m-size-font-md: 16px; --m-size-font-lg: 18px; /* Typeface — a humanist SANS for prose/UI (reads as design, not code) + a refined MONO kept for the * technical/numeric bits (dial values, ports, the clock readout). The pairing bridges artist + * engineer. System stacks only (no web-font fetch — Rule 3); the lead names are bundle-ready hooks — * drop a .woff2 + an @font-face and they take over with no other change. */ --m-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --m-font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Legacy radius (kept for back-compat consumers). The canonical control radii are --m-radius-* below. */ --m-size-radius-sm: 2px; --m-size-radius-md: 4px; /* ══ Semantic ══════════════════════════════════════════════════════════════ */ /* Surfaces — an elevation model (darkest sunken → lightest pressed), not drop-shadows. */ --m-surface-sunken: var(--m-color-neutral-0); --m-surface-base: var(--m-color-neutral-50); --m-surface-raised: var(--m-color-neutral-100); --m-surface-overlay: var(--m-color-neutral-150); --m-surface-pressed: var(--m-color-neutral-200); /* Content — text/icon weights on the surfaces. */ --m-content-primary: var(--m-color-neutral-900); --m-content-secondary: var(--m-color-neutral-700); --m-content-muted: var(--m-color-neutral-600); --m-content-tertiary: var(--m-color-neutral-500); /* Borders — three weights: subtle hairline · default · strong (control outlines). */ --m-border-subtle: hsl(222 12% 15%); --m-border-default: hsl(222 11% 20%); --m-border-emphasis: var(--m-color-neutral-400); --m-border-strong: var(--m-color-neutral-400); /* Accent scale — the one green + its hover / dim / tint / hairline / on-accent text. * NB: the anchor is `--m-accent-base`, NOT bare `--m-accent` — the kernel emits its legacy * `accent` role onto the bare `--m-accent` slot at runtime (an inline override), so a token * named `--m-accent` would be silently clobbered by the old value. The suffixed names are safe. */ --m-accent-base: var(--m-color-accent-500); --m-accent-bright: hsl(146 66% 68%); /* hover */ --m-accent-dim: var(--m-color-accent-300); --m-accent-tint: hsl(146 52% 52% / 0.15); /* on-state fills, aria-pressed */ --m-accent-line: hsl(146 52% 52% / 0.42); /* accent hairline / focus ring */ --m-on-accent: hsl(150 55% 7%); /* text/icon on an accent fill */ /* Interactive aliases — the historic names the estate reads; now the one accent. */ --m-interactive-primary: var(--m-accent-base); --m-interactive-muted: var(--m-accent-dim); /* Radius — the canonical control scale (sm control corners → pill). */ --m-radius-sm: 4px; --m-radius-md: 6px; --m-radius-lg: 9px; --m-radius-xl: 13px; --m-radius-pill: 999px; /* Elevation — a three-step shadow set + an accent glow, for popouts / dialogs / focus emphasis. */ --m-elevation-1: 0 1px 2px hsl(224 30% 3% / .4); --m-elevation-2: 0 4px 14px -6px hsl(224 40% 2% / .55); --m-elevation-3: 0 18px 50px -18px hsl(224 50% 2% / .7); --m-glow: 0 0 0 1px var(--m-accent-line), 0 0 18px -4px hsl(146 60% 50% / .5); /* Motion — one curve, three durations. Components animate on these, never ad-hoc. */ --m-motion-fast: 110ms; --m-motion-base: 150ms; --m-motion-slow: 240ms; --m-ease: cubic-bezier(.2, 0, 0, 1); /* Focus — one visible keyboard-focus ring (a two-layer inset+accent halo). */ --m-focus-ring: 0 0 0 2px var(--m-surface-base), 0 0 0 4px var(--m-accent-line); /* Control heights — one scale: sm for dense toolbars, md the default. */ --m-ctl-sm: 24px; --m-ctl-md: 28px; /* Wire / port type colours (the canvas type-as-colour palette; the audio wire IS the accent). * The non-audio hues are their own family — a dedicated canvas-token pass (P4) revisits them. */ --m-wire-audio: var(--m-accent-base); --m-wire-control: hsl( 35 90% 65%); --m-wire-midi: hsl(210 90% 70%); --m-wire-trigger: hsl(270 70% 75%); --m-wire-sidechain: var(--m-accent-base); --m-wire-sync: hsl(170 60% 55%); --m-wire-gate: hsl(270 75% 73%); --m-wire-data: hsl(215 25% 58%); --m-wire-other: var(--m-color-neutral-500); }