/* =====================================================
   multicommerce — Design tokens (single source of truth)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Surfaces */
  --bg:            #f5f6f8;
  --bg-alt:        #ffffff;
  --surface:       #ffffff;
  --surface-muted: #f8fafc;
  --row-alt:       #fafbfc;
  --row-hover:     #f1f5f9;

  /* Text */
  --ink:        #0f172a;
  --ink-2:      #334155;
  --muted:      #64748b;
  --muted-2:    #94a3b8;

  /* Borders */
  --border:       #e5e7eb;
  --border-2:     #d1d5db;
  --border-focus: #2563eb;

  /* Brand (blue) */
  --blue:      #2563eb;
  --blue-600:  #1d4ed8;
  --blue-700:  #1e40af;
  --blue-50:   #eff6ff;
  --blue-100:  #dbeafe;

  /* Success (green) */
  --green:     #16a34a;
  --green-600: #15803d;
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;

  /* Danger (red) */
  --red:       #dc2626;
  --red-600:   #b91c1c;
  --red-50:    #fef2f2;
  --red-100:   #fee2e2;

  /* Warn (amber) */
  --amber:     #f59e0b;
  --amber-600: #d97706;
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;

  /* Slate / neutral */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-500: #64748b;
  --slate-700: #334155;

  /* Radius */
  --r-sm:   6px;
  --r:      8px;
  --r-lg:   12px;
  --r-xl:   16px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 4px 14px rgba(15,23,42,.08);
  --shadow-lg: 0 10px 24px rgba(15,23,42,.10);

  /* Layout */
  --sidebar-w:   220px;
  --topbar-h:    48px;
  --z-topbar:    40;
  --z-sidebar:   50;
  --z-modal:     100;

  /* Font */
  --font: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4,h5,h6 { margin: 0 0 .35rem; line-height: 1.25; color: var(--ink); letter-spacing: -0.012em; }
h1 { font-size: 19.5px; font-weight: 700; }
h2 { font-size: 17.5px; font-weight: 700; }
h3 { font-size: 15.5px; font-weight: 600; }
h4 { font-size: 14.5px; font-weight: 600; }

p { margin: 0 0 .55rem; color: var(--ink-2); font-size: 14.5px; }

.muted      { color: var(--muted); }
.muted-sm   { color: var(--muted); font-size: 12px; }
.text-right { text-align: right; }
.text-center{ text-align: center; }

/* Utility */
.flex    { display: flex; }
.flex-1  { flex: 1; }
.gap-6   { gap: 6px; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full  { width: 100%; }
.mt-8    { margin-top: 8px; }
.mt-12   { margin-top: 12px; }
.mt-16   { margin-top: 16px; }
.mt-24   { margin-top: 24px; }
.mb-8    { margin-bottom: 8px; }
.mb-16   { margin-bottom: 16px; }

/* Scrollbar */
*::-webkit-scrollbar        { width: 10px; height: 10px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }