/* Stacklens design tokens: shared by the viewer, the setup screen and the site.
   site/tokens.css is a copy; run `npm run sync:tokens` after editing this file.
   Rule: the only hues are the three layer plates from the icon. Everything else
   (buttons, focus, edges, status messages) is neutral ink, so colour always means a layer. */

@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/ahl-next-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/ahl-next-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Mono'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/ahl-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible Mono'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/ahl-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --sl-sans: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sl-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* type scale (px) */
  --sl-t-11: 11px; --sl-t-12: 12px; --sl-t-13: 13px; --sl-t-14: 14px; --sl-t-16: 16px; --sl-t-18: 18px;
  --sl-t-21: 21px; --sl-t-24: 24px; --sl-t-30: 30px; --sl-t-36: 36px; --sl-t-48: 48px;

  /* radius shrinks with depth: product > layer > group > file > symbol; controls use --sl-r-ctl */
  --sl-r-product: 14px; --sl-r-layer: 10px; --sl-r-group: 8px; --sl-r-file: 6px; --sl-r-symbol: 4px; --sl-r-ctl: 8px;

  /* layer plates (icon colours): fills, borders, dots. Never text, never status. */
  --sl-fe: #3b82f6; --sl-mw: #ef5a43; --sl-be: #22a06b; --sl-tool: #8a909c;

  --sl-ink: #1b1e24; --sl-ink-2: #5a6170; --sl-line: #d8dce3;
  --sl-canvas: #f3f4f6; --sl-panel: #ffffff; --sl-sunken: #eceef2;
  --sl-on-ink: #ffffff;
  --sl-edge: #9aa1ad; --sl-edge-strong: #1b1e24;
  --sl-focus: #1b1e24;
  --sl-shadow: 0 1px 2px rgb(16 18 22 / .06), 0 4px 14px rgb(16 18 22 / .06);

  /* layer text (4.5:1 on panel and on its tint) and tints */
  --sl-fe-tx: #1d4ed8; --sl-mw-tx: #b42318; --sl-be-tx: #146c47; --sl-tool-tx: #5a6170;
  --sl-fe-bg: #eaf1fe; --sl-mw-bg: #fdecea; --sl-be-bg: #e6f5ee; --sl-tool-bg: #eef0f3;
}

:root[data-theme="dark"] {
  --sl-ink: #e6e8ec; --sl-ink-2: #a3aab6; --sl-line: #343a45;
  --sl-canvas: #1a1d23; --sl-panel: #22262d; --sl-sunken: #2a2f37;
  --sl-on-ink: #1a1d23;
  --sl-edge: #6b7280; --sl-edge-strong: #e6e8ec;
  --sl-focus: #e6e8ec;
  --sl-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 14px rgb(0 0 0 / .25);
  --sl-fe-tx: #93b8fb; --sl-mw-tx: #f8a597; --sl-be-tx: #7fd3ad; --sl-tool-tx: #a3aab6;
  --sl-fe-bg: #1f2c44; --sl-mw-bg: #3a2420; --sl-be-bg: #1c3329; --sl-tool-bg: #2a2f37;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sl-ink: #e6e8ec; --sl-ink-2: #a3aab6; --sl-line: #343a45;
    --sl-canvas: #1a1d23; --sl-panel: #22262d; --sl-sunken: #2a2f37;
    --sl-on-ink: #1a1d23;
    --sl-edge: #6b7280; --sl-edge-strong: #e6e8ec;
    --sl-focus: #e6e8ec;
    --sl-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 14px rgb(0 0 0 / .25);
    --sl-fe-tx: #93b8fb; --sl-mw-tx: #f8a597; --sl-be-tx: #7fd3ad; --sl-tool-tx: #a3aab6;
    --sl-fe-bg: #1f2c44; --sl-mw-bg: #3a2420; --sl-be-bg: #1c3329; --sl-tool-bg: #2a2f37;
  }
}