/* Advantrix Supplier Desk: shared tokens and primitives */
:root {
  --deep: #0D1426;
  --navy: #1B2A4A;
  --navy-2: #13314A;
  --teal: #2A9D8F;
  --teal-dark: #1D7468;
  --teal-ink: #14544B;
  --teal-tint: #E7F4F2;
  --teal-tint-2: #EEF8F6;
  --ground: #F3F5F7;
  --ground-2: #EEF1F4;
  --surface: #FFFFFF;
  --line: #E1E5EA;
  --line-2: #C9D0D8;
  --ink: #14202B;
  --ink-2: #2B3644;
  --ink-3: #3E4957;
  --muted: #586374;
  --faint: #8792A2;
  --on-dark-muted: #B8C2D3;
  --warn-bg: #FDF1E1;
  --warn-line: #F1C98F;
  --warn-ink: #6B3A05;
  --warn: #8A4A06;
  --danger: #A12C2C;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--teal-dark); }
a:hover { color: var(--teal-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }

.btn { text-decoration: none; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--teal-ink); }
.btn.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.danger { color: var(--danger); }
.btn:disabled { background: var(--line-2); border-color: var(--line-2); color: var(--muted); cursor: not-allowed; }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn.chip { min-height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12.5px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.field input, .field select, .field textarea { min-height: 42px; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; background: var(--surface); font-size: 14px; }
.field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.hint { font-size: 12px; color: var(--muted); }

.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px; }
.badge.teal { color: var(--teal-ink); background: var(--teal-tint); }
.badge.navy { color: var(--navy); background: #E6EAF2; }
.badge.warn { color: var(--warn); background: var(--warn-bg); }
.badge.grey { color: var(--muted); background: var(--ground-2); }

.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; }
.toast { background: var(--deep); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(13,20,38,.25); max-width: 90vw; }
.toast.error { background: var(--danger); }