/* ======================================================================
   SwordControl Studio — Design Tokens
   Source of truth: dashboard-workspace.css
   ====================================================================== */

:root {
  /* Backgrounds */
  --sc-bg-0: #141517;
  --sc-bg-1: #1b1d20;
  --sc-surface-0: #1c1e21;
  --sc-surface-1: #24272b;
  --sc-surface-hover: #2a2d31;
  --sc-surface-active: #2a342b;

  /* Borders */
  --sc-border-subtle: #292c30;
  --sc-border: #34373d;
  --sc-border-strong: #4a4e55;

  /* Text */
  --sc-text: #edeef0;
  --sc-text-2: #c9cdd3;
  --sc-text-3: #a1a5ae;
  --sc-text-disabled: #6f747c;

  /* Accents */
  --sc-green: #77d69b;
  --sc-green-strong: #e2eddf;
  --sc-green-bg: rgba(119, 214, 155, .13);
  --sc-dark-green-tea: #b9cfb7;
  --sc-dark-green-tea-bg: #29362c;
  --sc-red: #ff6b6b;
  --sc-red-bg: rgba(255, 107, 107, .10);
  --sc-amber: #e4bd58;
  --sc-amber-bg: rgba(228, 189, 88, .10);

  /* Typography */
  --sc-font-ui: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sc-font-brand: 'Segoe UI', system-ui, sans-serif;
  --sc-font-mono: 'Cascadia Mono', 'Consolas', 'Menlo', monospace;

  /* Text scale for dense operator UI. Five steps, hierarchy comes from weight and colour:
     2xs micro-labels, xs labels, sm dense body, md body, lg section titles.
     Apple HIG: ~4 sizes per view, nothing below 10pt; the pages used to carry 13-27 sizes
     including half-pixel steps (6.5, 7.5, 8.5, 9.5) — normalised by tools/normalise-type-scale.cjs. */
  --sc-fs-2xs: 10px;
  --sc-fs-xs: 11px;
  --sc-fs-sm: 12px;
  --sc-fs-md: 14px;
  --sc-fs-lg: 16px;
  --sc-fs-xl: 20px;
  --sc-fs-2xl: 24px;
  --sc-fs-3xl: 32px;

  /* Icon scale (Material Symbols glyphs and other pictograms). A glyph's size is optical:
     micro icons in chips, large ones in empty states. Separate from the text scale so that
     an 11px chip icon does not force an 11px label somewhere else. */
  --sc-icon-2xs: 12px;
  --sc-icon-xs: 14px;
  --sc-icon-sm: 16px;
  --sc-icon-md: 20px;
  --sc-icon-lg: 24px;
  --sc-icon-xl: 32px;

  --sc-fw-regular: 400;
  --sc-fw-medium: 500;
  --sc-fw-semibold: 600;
  --sc-fw-bold: 700;

  --sc-lh-tight: 1.2;
  --sc-lh-normal: 1.4;
  --sc-lh-loose: 1.55;

  /* Spacing */
  --sc-space-1: 4px;
  --sc-space-2: 6px;
  --sc-space-3: 8px;
  --sc-space-4: 12px;
  --sc-space-5: 16px;
  --sc-space-6: 20px;
  --sc-space-7: 24px;
  --sc-space-8: 32px;
  --sc-space-9: 40px;
  --sc-space-10: 56px;

  /* Radii */
  --sc-radius-sm: 4px;
  --sc-radius: 7px;
  --sc-radius-large: 12px;
  --sc-radius-pill: 999px;

  /* Motion */
  --sc-fast: 150ms;
  --sc-normal: 220ms;
  --sc-slow: 320ms;
  --sc-ease: ease;
  --sc-ease-out: cubic-bezier(.22, 1, .36, 1);
  --sc-ease-in: cubic-bezier(.4, 0, .2, 1);

  /* Elevation */
  --sc-shadow-1: 0 1px 2px rgba(0,0,0,.25);
  --sc-shadow-2: 0 4px 16px rgba(0,0,0,.35);
  --sc-shadow-3: 20px 0 60px rgba(0,0,0,.40);

  /* Layout */
  --sc-shell-max: 1440px;
  --sc-appbar-h: 58px;
  --sc-drawer-w: 300px;

  /* Z-index */
  --sc-z-appbar: 80;
  --sc-z-nav: 70;
  --sc-z-drawer: 200;
  --sc-z-modal: 300;
  --sc-z-toast: 400;

  /* Referenced by the page stylesheets but absent here, so they are restored with the
     values those pages were designed against (the sage palette that studio-workspace.css
     used to apply). Without them a page swapped onto this system would silently lose the
     value: registration-v38.css alone references four of them, and the whole
     preparation/teamregistration family references --sc-bg-2. */
  --sc-bg-2: #202226;
  --sc-surface-2: #292d31;
  --sc-control-h: 32px;
  --sc-status-h: 28px;
  --sc-shadow-float: 0 20px 70px rgba(0,0,0,.42);
  --sc-shadow-popup: 0 12px 40px rgba(0,0,0,.48);
  --sc-border-focus: #6f7787;
  --sc-onair: #ff5d5d;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sc-fast: 0ms;
    --sc-normal: 0ms;
    --sc-slow: 0ms;
  }
}