/* ── TBS Dispatch & Delivery — Design Tokens (dark greyscale · sans-serif) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* Greyscale canvas (light) */
  --bg:            #f3f4f6;
  --bg-2:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f6f7f9;
  --surface-3:     #eceef1;
  --line:          #e1e4e8;
  --line-2:        #eef0f3;

  --text:          #1a1c1e;
  --text-2:        #4b5158;
  --text-3:        #878d95;
  --text-inv:      #ffffff;

  /* Accent = near-black for primary actions (greyscale) */
  --accent:        #23262b;
  --accent-hover:  #121417;
  --accent-press:  #3a3f45;
  --accent-soft:   #eceef1;
  --accent-ring:   rgba(35, 38, 43, 0.12);

  /* Muted, near-greyscale status tints (kept low-chroma) */
  --pos:           #3a7d59;   --pos-soft:  #e9f3ed;
  --neg:           #b4453d;   --neg-soft:  #fbeceb;
  --warn:          #9c7620;   --warn-soft: #f7efdb;

  --radius-sm:     9px;
  --radius:        14px;
  --radius-lg:     20px;
  --radius-xl:     26px;

  --shadow-sm:     0 1px 2px rgba(20,22,26,.06);
  --shadow:        0 6px 20px rgba(20,22,26,.08);
  --shadow-lg:     0 24px 60px rgba(20,22,26,.16);

  --sidebar-w:     250px;
  --topbar-h:      64px;

  --sans:          'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:          'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --transition:    160ms cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--text); }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; font-size: 1rem; color: inherit; }

.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8ccd2; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b0b5bc; }

/* Loading spinner */
.loading-wrap { display: flex; align-items: center; justify-content: center; padding: 80px 0; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--surface-3); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }