/* ============================================================================
   meebd design system (ds) — tokens + component layer. See docs/DESIGN-SYSTEM.md.
   Loaded after app.css / admin.css / platform.css: it maps the older variable names onto these tokens,
   so every screen shares one palette, one type scale and one set of components.
   Approach: Radix-style 12-step scales, Polaris-style merchant patterns, Primer-style semantic names.
   ========================================================================== */
:root{
  /* brand: emerald, tuned for WCAG AA (white on --ds-brand-9 = 4.9:1) */
  --ds-brand-1:#F4FBF8; --ds-brand-2:#E8F5EF; --ds-brand-3:#D3EDE1; --ds-brand-4:#B5E0CD;
  --ds-brand-6:#5FBF98; --ds-brand-9:#08805D; --ds-brand-10:#066B4E; --ds-brand-11:#055C43; --ds-brand-12:#0B3326;
  /* neutrals: cool slate */
  --ds-gray-1:#FBFCFD; --ds-gray-2:#F6F7F9; --ds-gray-3:#EEF0F3; --ds-gray-4:#E4E7EC; --ds-gray-6:#CDD2DA;
  --ds-gray-9:#8A93A3; --ds-gray-10:#64748B; --ds-gray-11:#475163; --ds-gray-12:#121826;
  /* semantic */
  --ds-ok:#0F7A45; --ds-ok-soft:#E9F6EE; --ds-warn:#9A5B00; --ds-warn-soft:#FFF4DB; --ds-err:#B42318; --ds-err-soft:#FDECEA; --ds-info:#1F5FBF; --ds-info-soft:#EAF1FD;
  /* surfaces + text */
  --ds-bg:var(--ds-gray-2); --ds-surface:#FFFFFF; --ds-surface-2:var(--ds-gray-1); --ds-sunken:var(--ds-gray-3);
  --ds-line:var(--ds-gray-4); --ds-line-strong:var(--ds-gray-6);
  --ds-text:var(--ds-gray-12); --ds-text-2:var(--ds-gray-11); --ds-muted:var(--ds-gray-10);
  /* type: Inter + Noto Sans Bengali, standard weights only (400 body, 500 labels/buttons, 600-700 headings) */
  --ds-font:'Inter','Noto Sans Bengali',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ds-fs-1:13px; --ds-fs-2:14px; --ds-fs-3:15px; --ds-fs-4:16px; --ds-fs-5:18px; --ds-fs-6:22px; --ds-fs-7:28px; --ds-fs-8:clamp(32px,4.4vw,48px);
  --ds-w-body:400; --ds-w-label:500; --ds-w-head:600; --ds-w-strong:700;
  /* space: 4px grid */
  --ds-s-1:4px; --ds-s-2:8px; --ds-s-3:12px; --ds-s-4:16px; --ds-s-5:20px; --ds-s-6:24px; --ds-s-8:32px; --ds-s-10:40px; --ds-s-12:48px; --ds-s-16:64px;
  /* radius, shadow, motion */
  --ds-r-1:6px; --ds-r-2:8px; --ds-r-3:10px; --ds-r-4:12px; --ds-r-full:999px;
  --ds-sh-1:0 1px 2px rgba(18,24,38,.06); --ds-sh-2:0 4px 12px rgba(18,24,38,.08); --ds-sh-3:0 12px 32px rgba(18,24,38,.14);
  --ds-ring:0 0 0 3px rgba(8,128,93,.28);
  --ds-ease:cubic-bezier(.2,0,.2,1); --ds-t-fast:120ms; --ds-t:180ms;
}
:root[data-theme="dark"],html[data-theme="dark"] body.admin-shell{
  --ds-brand-1:#0B1F18; --ds-brand-2:#0E2A20; --ds-brand-3:#123628; --ds-brand-9:#2FBF8A; --ds-brand-10:#5ED3A6; --ds-brand-11:#7FE0BB; --ds-brand-12:#D4F5E6;
  --ds-bg:#0E1116; --ds-surface:#151922; --ds-surface-2:#1A1F29; --ds-sunken:#1F2531; --ds-line:#2A3140; --ds-line-strong:#3A4354;
  --ds-text:#E8ECF2; --ds-text-2:#C5CCD8; --ds-muted:#97A1B2;
  --ds-ok-soft:#0E2A1C; --ds-warn-soft:#2A2110; --ds-err-soft:#2D1414; --ds-info-soft:#13213A;
}

/* map the existing variable names onto the tokens (app, admin, platform) */
:root,body.admin-shell{
  --brand:var(--ds-brand-9); --brand-hover:var(--ds-brand-10); --brand-active:var(--ds-brand-11);
  --brand-soft:var(--ds-brand-2); --brand-softer:var(--ds-brand-1); --brand-line:var(--ds-brand-4); --brand-ink:var(--ds-brand-11);
  --brand-btn:var(--ds-brand-9); --brand-btn-hover:var(--ds-brand-10); --brand-btn-active:var(--ds-brand-11); --brand-btn-ink:#fff;
  --bg:var(--ds-bg); --surface:var(--ds-surface); --surface-2:var(--ds-surface-2); --surface-3:var(--ds-sunken);
  --line:var(--ds-line); --line-2:var(--ds-line-strong); --text:var(--ds-text); --text-2:var(--ds-text-2); --muted:var(--ds-muted);
  --ok:var(--ds-ok); --ok-soft:var(--ds-ok-soft); --warn:var(--ds-warn); --warn-soft:var(--ds-warn-soft); --err:var(--ds-err); --err-soft:var(--ds-err-soft);
  --nav-active:var(--ds-brand-2); --ring:var(--ds-ring);
  --font:var(--ds-font); --display:var(--ds-font);
}
html[data-theme="dark"] body.admin-shell{--brand-btn-ink:#06140F}

/* ── Components ─────────────────────────────────────────────────────────── */
body{font-weight:var(--ds-w-body)}
:is(h1,h2,h3,h4){font-weight:var(--ds-w-head)}
label,.label,.btn,.tab,.badge,.sb-link,.filter-chip{font-weight:var(--ds-w-label)}

/* buttons: one primary per view, quiet secondary, ghost for tertiary */
.btn{border-radius:var(--ds-r-2);transition:background var(--ds-t-fast) var(--ds-ease),border-color var(--ds-t-fast) var(--ds-ease),box-shadow var(--ds-t-fast) var(--ds-ease)}
.btn-primary{background:var(--ds-brand-9);border-color:var(--ds-brand-9);color:#fff}
.btn-primary:hover{background:var(--ds-brand-10);border-color:var(--ds-brand-10);color:#fff}
.btn:focus-visible{outline:none;box-shadow:var(--ds-ring)}
.btn[aria-busy="true"],.btn.is-loading{pointer-events:none;opacity:.7}

/* inputs: 40px tall, clear focus, inline error */
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){border-radius:var(--ds-r-2)}
:is(input,select,textarea):focus-visible{outline:none;border-color:var(--ds-brand-9);box-shadow:var(--ds-ring)}
:is(input,select,textarea)[aria-invalid="true"]{border-color:var(--ds-err)}
.field-error{color:var(--ds-err)}

/* badges: soft, readable */
.badge{border-radius:var(--ds-r-full);font-size:var(--ds-fs-1);padding:2px 10px;border:0}

/* tables: quiet rows, sticky header, no zebra */
table th{font-size:var(--ds-fs-1);font-weight:var(--ds-w-label);color:var(--ds-muted);text-transform:none;letter-spacing:0;background:transparent}
table td,table th{border-color:var(--ds-line)}
tbody tr:hover td{background:var(--ds-surface-2)}

/* tabs */
.tab{border-radius:var(--ds-r-2)}
.tab.on,.tab[aria-selected="true"]{color:var(--ds-text)}

/* dropdowns, modals, toasts: one elevation family */
.dd-panel{border:0;border-radius:var(--ds-r-4);box-shadow:var(--ds-sh-3)}
dialog,.modal{border:0;border-radius:var(--ds-r-4);box-shadow:var(--ds-sh-3)}
.toast{border:0;border-radius:var(--ds-r-3);box-shadow:var(--ds-sh-3)}

/* empty states: icon, one line, one action */
.empty{padding:var(--ds-s-10) var(--ds-s-6);text-align:center}
.empty p{max-width:44ch;margin-inline:auto}

/* motion: respect the visitor */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}

/* dark: the primary button keeps the brand green everywhere (store admin, seller, platform, sign-in); dark ink on it for AA (8.9:1) */
:root[data-theme="dark"] .btn-primary,html[data-theme="dark"] body.admin-shell .btn-primary{background:var(--ds-brand-9);border-color:var(--ds-brand-9);color:#06140F}
:root[data-theme="dark"] .btn-primary:hover,html[data-theme="dark"] body.admin-shell .btn-primary:hover{background:var(--ds-brand-10);border-color:var(--ds-brand-10);color:#06140F}