/**
 * Legacy --sl-* aliases mapped to workstation tokens.
 * tokens.css must load first — imported here so every page that includes
 * variables.css gets the full design system (not only CAD HTML entry points).
 */
@import url('./tokens.css');

:root {
  --sl-bg:           var(--bg-base);
  --sl-surface:      var(--bg-panel);
  --sl-surface-2:    var(--bg-panel-alt);
  --sl-header:       #0a0d12;

  --sl-border:       var(--border-subtle);
  --sl-border-dim:   var(--border-divider);

  /* Legacy accent — interactive blue (buttons, links, focus rings) */
  --sl-blue:         var(--status-info);
  --sl-blue-dim:     #388bfd;
  --sl-accent:       var(--status-info);

  --sl-success:      var(--status-available);
  --sl-warning:      var(--status-caution);
  --sl-danger:       var(--status-emergency);
  --sl-orange:       var(--status-busy);

  --sl-p1-bg:        color-mix(in srgb, var(--pri-1) 85%, transparent);
  --sl-p1-text:      #ffffff;
  --sl-p2-bg:        color-mix(in srgb, var(--pri-2) 80%, transparent);
  --sl-p2-text:      #ffffff;
  --sl-p3-bg:        color-mix(in srgb, var(--pri-3) 80%, transparent);
  --sl-p3-text:      var(--bg-base);
  --sl-p4-bg:        color-mix(in srgb, var(--pri-4) 70%, transparent);
  --sl-p4-text:      var(--bg-base);

  --sl-text:         var(--text-primary);
  --sl-muted:        var(--text-muted);
  --sl-white:        var(--text-primary);

  --sl-font:         var(--font-sans);
  --sl-mono:         var(--font-mono);

  --sl-radius:       var(--cad-radius);
  --sl-radius-md:    var(--cad-radius);
  --sl-radius-lg:    3px;
}