/* ─────────────────────────────────────────────────────────────────────
   tokens.css — design system root variables + base body styles.
   Ported from tp-next as canonical CTN workspace design system.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ───── Surface & text ───── */
  --bg:#fafaf9;
  --surface:#ffffff;
  --surface-2:#f5f5f4;
  --surface-3:#fbfbfa;
  --border:#eae8e5;
  --border-2:#e0ddd9;
  --text:#0c0a09;
  --text-2:#57534e;
  --text-3:#a8a29e;
  --text-4:#d6d3d1;

  /* ───── Semantic colors ───── */
  --primary:#1d4ed8;
  --primary-hover:#1e40af;
  --primary-soft:#eff6ff;
  --primary-soft-2:#dbeafe;
  --primary-text:#1e3a8a;
  --success:#0d8f5a;
  --success-strong:#065f3a;
  --success-soft:#ecfdf5;
  --success-border:#a7f3d0;
  --danger:#be1d2c;
  --danger-strong:#8a141f;
  --danger-soft:#fef2f2;
  --danger-border:#fecaca;
  --warning:#b45309;
  --warning-strong:#7c3a08;
  --warning-soft:#fffbeb;
  --warning-border:#fde68a;
  --info:#1d4ed8;
  --info-strong:#1e3a8a;
  --info-soft:#eff6ff;
  --info-border:#c5d6ff;
  --neutral:#525252;
  --neutral-soft:#f5f5f5;
  --neutral-border:#e5e5e5;
  --violet:#6d28d9;
  --violet-soft:#f5f3ff;
  --violet-border:#ddd6fe;

  /* ───── Spacing scale ───── */
  --sp-px: 1px;
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  8px;
  --sp-4:  10px;
  --sp-5:  12px;
  --sp-6:  14px;
  --sp-7:  18px;
  --sp-8:  24px;
  --sp-9:  28px;
  --sp-10: 32px;

  /* ───── Radius scale ───── */
  --r-sm:   5px;
  --r-md:   6px;
  --r-lg:   7px;
  --r-xl:   8px;
  --r-2xl:  10px;
  --r-3xl:  12px;
  --r-4xl:  14px;
  --r-full: 9999px;

  --table-edge-x: var(--sp-6);
}

* { box-sizing: border-box }
html, body { height: 100% }

body {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11','ss01','ss03','cv02';
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc2VlZD0nNScvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwICAwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMC4wNCAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}

.mono     { font-family: 'Geist Mono', ui-monospace, monospace; font-feature-settings: 'tnum','zero'; letter-spacing: -0.01em }
.tabular  { font-variant-numeric: tabular-nums }
.display  { letter-spacing: -0.022em; font-weight: 600 }

.shadow-card   { box-shadow: 0 0 0 1px rgba(15,17,21,0.04), 0 1px 2px rgba(15,17,21,0.04) }
.shadow-pop    { box-shadow: 0 0 0 1px rgba(15,17,21,0.06), 0 2px 4px rgba(15,17,21,0.04), 0 12px 32px -6px rgba(15,17,21,0.10) }
.shadow-drawer { box-shadow: -8px 0 24px -8px rgba(15,17,21,0.06), -1px 0 0 0 var(--border) }

a { color: inherit }
svg { flex-shrink: 0 }