/* MeshiTrack design tokens */

:root {
  /* Type */
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --font-display: 'Fraunces', 'Inter Tight', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Neutrals (warm off-white → near-black) */
  --bg: #f6f4ef;
  --bg-elev: #ffffff;
  --bg-inset: #efebe3;
  --border: #e4dfd4;
  --border-strong: #cfc8b8;
  --ink-faint: #a39b89;
  --ink-muted: #6e6759;
  --ink: #1d1b17;
  --ink-strong: #0b0a08;

  /* Brand — refined sage-leaning green (was straight green) */
  --brand: #2f6b4a;
  --brand-deep: #1e4a32;
  --brand-ink: #ffffff;
  --brand-soft: #e6efe8;
  --brand-soft-ink: #1e4a32;

  /* Status */
  --danger: #b8361a;
  --danger-soft: #fbe8e0;
  --warn: #a66a0a;
  --warn-soft: #f9ecd2;
  --ok: #3e7a4c;
  --ok-soft: #e3ede0;
  --info: #3a5a85;
  --info-soft: #e1e8f1;

  /* Data viz (cabinet categories / charts) */
  --viz-1: #2f6b4a;
  --viz-2: #a66a0a;
  --viz-3: #3a5a85;
  --viz-4: #8a4c6e;
  --viz-5: #6b6237;
  --viz-6: #7a3a28;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(20, 18, 10, 0.04), 0 0 0 1px rgba(20, 18, 10, 0.04);
  --shadow-md: 0 4px 16px -6px rgba(20, 18, 10, 0.08), 0 0 0 1px rgba(20, 18, 10, 0.05);
  --shadow-lg: 0 20px 40px -20px rgba(20, 18, 10, 0.22), 0 0 0 1px rgba(20, 18, 10, 0.06);
}

[data-theme='dark'] {
  --bg: #141310;
  --bg-elev: #1c1b17;
  --bg-inset: #100f0c;
  --border: #2a2823;
  --border-strong: #3a372f;
  --ink-faint: #6a6559;
  --ink-muted: #9a9386;
  --ink: #ece8de;
  --ink-strong: #f8f5ec;

  --brand: #5fa87b;
  --brand-deep: #8fc9a4;
  --brand-ink: #0b0a08;
  --brand-soft: #1e2c23;
  --brand-soft-ink: #8fc9a4;

  --danger: #e37358;
  --danger-soft: #2c1a15;
  --warn: #d6a152;
  --warn-soft: #2c2217;
  --ok: #7aba89;
  --ok-soft: #1a2820;
  --info: #7ea3cf;
  --info-soft: #1a2028;

  --viz-1: #5fa87b;
  --viz-2: #d6a152;
  --viz-3: #7ea3cf;
  --viz-4: #c088a5;
  --viz-5: #b8ac76;
  --viz-6: #d88a74;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 4px 16px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv11';
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  transition: background-color 0.2s, color 0.2s;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--brand); color: var(--brand-ink); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); }

.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }
.num { font-variant-numeric: tabular-nums; }