/* ─────────────────────────────────────────────────────────────────────
   tokens.css — design system root variables + base body styles.
   Single source of truth: every other workspace stylesheet refers back
   to these CSS custom properties for colors, spacing, radii, fonts.
   ───────────────────────────────────────────────────────────────────── */

: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 ─────
     Closed scale, single source of truth for gap/margin/padding utilities.
     Picked to cover real usage in mocks: 4/6/8/10/12/14/18/24/28/32 px.
     Note: there's also a `.{prop}-0.5` step (=2px, optical fine-tuning)
     defined directly in utility classes — no variable, since CSS escape
     `\.` in custom property names parses inconsistently across browsers. */
  --sp-px: 1px;
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  8px;
  --sp-4:  10px;   /* default cell padding */
  --sp-5:  12px;
  --sp-6:  14px;   /* table edge inset, section-head padding-x */
  --sp-7:  18px;
  --sp-8:  24px;
  --sp-9:  28px;   /* page horizontal padding */
  --sp-10: 32px;

  /* ───── Radius scale ─────
     Stepped: pills/inputs are sm/md, components 2xl/3xl, hero 4xl. */
  --r-sm:   5px;
  --r-md:   6px;
  --r-lg:   7px;
  --r-xl:   8px;
  --r-2xl:  10px;
  --r-3xl:  12px;
  --r-4xl:  14px;
  --r-full: 9999px;

  /* Horizontal inset shared by toolbar, table cells & footer.
     One value, one vertical line on the left/right edge of every card. */
  --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;
}

/* Subtle film-grain noise overlay. Decorative, pointer-events:none.
   Sits behind page content (z-index:0); .shell-main has z-index:1.

   NOTE on base64: the inline SVG uses `filter='url(#n)'` to reference an
   in-document filter id. When the URL is `utf8` / URL-encoded as %23n,
   Propshaft sees that `(...)` and tries to rewrite it as an asset path,
   prefixing a `/` and breaking the fragment reference. Browsers then
   render the rect with no filter — a flat black rectangle at opacity 0.4,
   covering the page in solid grey instead of subtle noise. Base64 payloads
   don't contain CSS-special characters, so Propshaft leaves them alone. */
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 + tabular numerals — for IDs, codes, amounts. */
.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 }

/* Elevation tokens. */
.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 }