/* Atisie design tokens — shared base across both directions */

:root {
  /* Direction A — Topographic (warm neutral) */
  --a-bg-0: #0a0908;
  --a-bg-1: #0f0e0c;
  --a-bg-2: #16140f;
  --a-line: rgba(212, 200, 170, 0.10);
  --a-line-strong: rgba(212, 200, 170, 0.22);
  --a-fg-0: #ebe6dc;
  --a-fg-1: #b9b3a6;
  --a-fg-2: #6b665c;
  --a-fg-3: #3d3a34;
  --a-accent: oklch(0.78 0.12 70);
  --a-accent-dim: oklch(0.78 0.12 70 / 0.15);

  /* Direction B — Network (cool neutral) */
  --b-bg-0: #08090c;
  --b-bg-1: #0c0d11;
  --b-bg-2: #12141a;
  --b-line: rgba(180, 200, 230, 0.08);
  --b-line-strong: rgba(180, 200, 230, 0.20);
  --b-fg-0: #e8ecf2;
  --b-fg-1: #a8b0bd;
  --b-fg-2: #5d6470;
  --b-fg-3: #2a2e36;
  --b-accent: oklch(0.78 0.10 220);
  --b-accent-dim: oklch(0.78 0.10 220 / 0.15);

  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-sans: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(255,255,255,0.18); }

/* utility */
.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "zero"; }
.tnum { font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
.hairline { height: 1px; background: currentColor; opacity: 0.18; }

/* shared scrollbar inside artboard */
.atisie-scope { scrollbar-width: thin; }
.atisie-scope::-webkit-scrollbar { width: 6px; height: 6px; }
.atisie-scope::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }