/*
 * Rig Canvas design tokens
 *
 * Single source of truth for all colors and semantic roles.
 * Imported by both Tailwind (application.css) and standalone
 * pages (rig_og.css). Change values here and they update everywhere.
 */

:root {
  /* Named palette */
  --warm-charcoal: #2F3437;
  --dusty-blue: #437290;
  --muted-sage: #7FA58C;
  --soft-amber: #E6B87A;
  --brick-red: #D4817E;
  --terracotta: #CC7A4E;
  --warm-gold: #D4A24C;
  --dusty-teal: #5DC1BB;
  --soft-purple: #8B6FB3;

  /* Core roles */
  --color-primary: var(--dusty-blue);
  --color-primary-light: color-mix(in oklab, var(--color-primary) 8%, white);
  --color-primary-hover: color-mix(in oklab, var(--color-primary) 85%, black);

  --color-info: var(--dusty-blue);
  --color-info-light: color-mix(in oklab, var(--color-info) 8%, white);

  --color-success: var(--muted-sage);
  --color-success-light: color-mix(in oklab, var(--color-success) 8%, white);

  --color-warning: var(--soft-amber);
  --color-warning-light: color-mix(in oklab, var(--color-warning) 8%, white);

  --color-error: var(--brick-red);
  --color-error-light: color-mix(in oklab, var(--color-error) 8%, white);
  --color-error-text: color-mix(in oklab, var(--color-error) 60%, black);

  /* Signal levels */
  --color-signal-control: var(--soft-purple);
  --color-signal-control-hover: color-mix(in oklab, var(--color-signal-control) 85%, black);
  --color-signal-mic: var(--dusty-blue);
  --color-signal-mic-hover: color-mix(in oklab, var(--color-signal-mic) 85%, black);
  --color-signal-instrument: var(--dusty-teal);
  --color-signal-instrument-hover: color-mix(in oklab, var(--color-signal-instrument) 85%, black);
  --color-signal-line: var(--muted-sage);
  --color-signal-line-hover: color-mix(in oklab, var(--color-signal-line) 85%, black);
  --color-signal-midi: var(--warm-gold);
  --color-signal-midi-hover: color-mix(in oklab, var(--color-signal-midi) 85%, black);
  --color-signal-speaker: var(--terracotta);
  --color-signal-speaker-hover: color-mix(in oklab, var(--color-signal-speaker) 85%, black);

  /* Structure */
  --color-base: var(--warm-charcoal);
  --color-base-secondary: #4A5056;
  --color-base-muted: #6B7280;
  --color-base-subtle: #9CA3AF;
  --color-base-disabled: #9CA3AF;

  --color-surface: #FFFFFF;
  --color-surface-alt: #F8F9FA;
  --color-surface-hover: #F1F3F5;
  --color-border: #DDE1E5;
}