/* ============================================================================
   SignalCanvas — Color tokens
   Sourced from FrontendV1: App.vue (--sc-* app shell) + HomeView.css
   (Material-3 surface scale) + edgeStyles.ts + stageCoreColors.ts.
   Dark-only. The product lives in control rooms and live venues.
   ============================================================================ */

:root {
  /* ---- Base ink / surfaces -------------------------------------------------
     The "terminal" family — deep near-black with a layered elevation scale.
     This is the brand-forward surface set (HomeView). */
  --sc-ink-900: #05070a;   /* footer / deepest chrome */
  --sc-ink-850: #0a0e14;   /* app background (brand surface) */
  --sc-ink-800: #0f141a;   /* container, low elevation */
  --sc-ink-700: #151a21;   /* container */
  --sc-ink-600: #1b2028;   /* container, high */
  --sc-ink-500: #20262f;   /* container, highest */

  /* ---- Slate family --------------------------------------------------------
     The app-shell surface set (App.vue). Cooler, used for dense tool chrome. */
  --sc-slate-900: #0f172a;
  --sc-slate-800: #1e293b;
  --sc-slate-700: #334155;
  --sc-slate-600: #475569;
  --sc-slate-500: #64748b;
  --sc-slate-400: #94a3b8;
  --sc-slate-300: #cbd5e1;
  --sc-slate-200: #e2e8f0;
  --sc-slate-100: #f1f5f9;
  --sc-slate-50:  #f8fafc;

  /* ---- Text ---------------------------------------------------------------- */
  --sc-text-bright: #f1f3fc;   /* headings on terminal surface */
  --sc-text-primary: #e2e8f0;  /* body */
  --sc-text-secondary: #a8abb3;
  --sc-text-muted: #64748b;    /* meta, labels, disabled */
  --sc-text-faint: #475569;

  /* ---- Accents -------------------------------------------------------------
     TEAL = primary brand accent (app icon, edit mode, cloud-connected).
     GREEN = "signal-live" accent (wordmark, status, firefly glow, active patch). */
  --sc-teal: #2dd4bf;
  --sc-teal-bright: #5eead4;
  --sc-teal-dim: #14b8a6;
  --sc-teal-deep: #0f766e;

  --sc-signal: #6bff8f;        /* glowing green — live signal / wordmark */
  --sc-signal-on: #005f28;     /* text on a signal-green fill */
  --sc-green: #22c55e;         /* status OK / connected dot */
  --sc-green-glow: rgba(34, 197, 94, 0.55);

  /* ---- Protocol / edge colors ---------------------------------------------
     How the canvas distinguishes signal types. */
  --sc-protocol-blue: #60a5fa; /* Dante / logical (bridge) edges */
  --sc-protocol-blue-deep: #3b82f6;
  --sc-cable: #94a3b8;         /* physical cable (connect) edges */

  /* ---- Semantic ------------------------------------------------------------ */
  --sc-danger: #f87171;
  --sc-danger-deep: #ef4444;
  --sc-warning: #eab308;
  --sc-warning-deep: #f97316;
  --sc-info: #60a5fa;
  --sc-success: #22c55e;

  /* ---- Signal-classification swatches (resistor color code) ----------------
     Used for stage-core / channel-group badges across canvas + patch sheet. */
  --sc-core-brown:  #92400e;
  --sc-core-red:    #ef4444;
  --sc-core-orange: #f97316;
  --sc-core-yellow: #eab308;
  --sc-core-green:  #22c55e;
  --sc-core-blue:   #3b82f6;
  --sc-core-violet: #a855f7;
  --sc-core-grey:   #64748b;
  --sc-core-white:  #e2e8f0;
  --sc-core-black:  #334155;

  /* ---- Borders ------------------------------------------------------------- */
  --sc-border: rgba(255, 255, 255, 0.15);
  --sc-border-subtle: rgba(255, 255, 255, 0.08);
  --sc-border-strong: #334155;
  --sc-outline: #44484f;

  /* ============================================================================
     SEMANTIC ALIASES — prefer these in components.
     ============================================================================ */
  --surface-app:        var(--sc-ink-850);
  --surface-sunken:     var(--sc-ink-900);
  --surface-card:       var(--sc-ink-700);
  --surface-card-low:   var(--sc-ink-800);
  --surface-card-high:  var(--sc-ink-600);
  --surface-raised:     var(--sc-ink-500);
  --surface-chrome:     var(--sc-slate-800);   /* toolbars / app shell */
  --surface-chrome-deep:var(--sc-slate-900);

  --text-heading:  var(--sc-text-bright);
  --text-body:     var(--sc-text-primary);
  --text-subtle:   var(--sc-text-secondary);
  --text-meta:     var(--sc-text-muted);
  --text-disabled: var(--sc-text-faint);
  --text-on-accent: var(--sc-ink-850);

  --accent:          var(--sc-teal);
  --accent-hover:    var(--sc-teal-bright);
  --accent-quiet:    rgba(45, 212, 191, 0.12);
  --signal:          var(--sc-signal);
  --signal-quiet:    rgba(107, 255, 143, 0.10);

  --border-default: var(--sc-border);
  --border-faint:   var(--sc-border-subtle);
  --border-line:    var(--sc-outline);

  --focus-ring: rgba(45, 212, 191, 0.55);
}