/* Generated by `pnpm ds:tokens` from tokens.json - do not edit. */
:root {
  --ds-bg-canvas: var(--brand-canvas);
  --ds-bg-surface: var(--brand-surface);
  --ds-text-primary: var(--brand-ink);
  --ds-text-muted: var(--brand-muted);
  --ds-text-on-accent: var(--brand-text-on-accent);
  --ds-border-subtle: var(--brand-line);
  --ds-border-strong: var(--brand-border-strong);
  --ds-accent: var(--brand-accent);
  --ds-focus-ring: var(--brand-ink);
  --ds-status-positive: var(--brand-status-positive);
  --ds-status-attention: var(--brand-status-attention);
  --ds-status-error: var(--brand-phase-error);
  --ds-phase-idle: var(--brand-phase-idle);
  --ds-phase-listening: var(--brand-phase-listening);
  --ds-phase-starting: var(--brand-phase-starting);
  --ds-phase-speaking: var(--brand-phase-speaking);
  --ds-phase-stopped: var(--brand-phase-stopped);
  --ds-phase-error: var(--brand-phase-error);
  --ds-phase-sleeping: var(--brand-phase-sleeping);
  --ds-job-running: var(--brand-illustration-tertiary);
  --ds-job-completed: var(--brand-status-positive);
  --ds-job-needs-input: var(--brand-status-attention);
  --ds-job-failed: var(--brand-phase-error);
  --ds-job-paused: var(--brand-phase-stopped);
  --ds-line-overlay: var(--brand-ink);
  --ds-fill-overlay: var(--brand-ink);
  --ds-bg-hover: var(--brand-line);
  --ds-text-faint: var(--brand-border-strong);
  --ds-text-on-phase-fill: var(--brand-canvas);

  /* Between two brand primitives: `weight` percent of the first. U-47, the desktop chrome. */
  --ds-chrome-accent-text-1: color-mix(in srgb, var(--brand-accent) 22.8%, var(--brand-ink));
  --ds-chrome-danger-text-1: color-mix(in srgb, var(--brand-phase-error) 68.2%, var(--brand-ink));
  --ds-chrome-danger-text-2: color-mix(in srgb, var(--brand-phase-error) 42.4%, var(--brand-ink));
  --ds-chrome-danger-text-3: color-mix(in srgb, var(--brand-phase-error) 7%, var(--brand-ink));
  --ds-chrome-fill-1: color-mix(in srgb, var(--brand-surface) 64.2%, var(--brand-line));
  --ds-chrome-text-1: color-mix(in srgb, var(--brand-border-strong) 61.6%, var(--brand-muted));
  --ds-chrome-text-2: color-mix(in srgb, var(--brand-border-strong) 34.8%, var(--brand-muted));
  --ds-chrome-text-3: color-mix(in srgb, var(--brand-muted) 84.6%, var(--brand-ink));
  --ds-chrome-text-4: color-mix(in srgb, var(--brand-muted) 62.2%, var(--brand-ink));
  --ds-chrome-text-5: color-mix(in srgb, var(--brand-muted) 17.6%, var(--brand-ink));

  /* Illustration only. Exempt from the brand-primitive rule by member. */
  --ds-illustration-emphasis-fallback: #EFC1C8;
  --ds-illustration-emphasis-peach: #F3CF9D;
  --ds-illustration-emphasis-rose: #F1A5B6;
  --ds-illustration-emphasis-lilac: #B5A1EF;
  --ds-illustration-emphasis-sand: #EFCA97;
  --ds-illustration-emphasis-leaf: #BCE0B5;
  --ds-illustration-emphasis-sky: #9ED9E7;
  --ds-illustration-emphasis-glow: #C4B2ED20;

  /* Type, spacing, radius and hit area. BRAND.md section 4. */
  --ds-font-sans: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
  --ds-type-label: 13px;
  --ds-type-body: 16px;
  --ds-type-legend: 20px;
  --ds-type-title: 30px;
  --ds-leading-title: 1.15;
  --ds-leading-body: 1.5;
  --ds-leading-label: 1.4;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-radius-panel: 12px;
  --ds-radius-control: 10px;
  --ds-radius-pill: 999px;
  --ds-control-min-target: 44px;
}