/* Seller Desk — design tokens
   Local preview handoff, September 2026.
   No external fonts, no gradients, no third-party dependencies. */

:root {
  /* Brand */
  --sd-ink:        #0C2E33; /* symbol, wordmark, primary text, sidebar ground */
  --sd-teal:       #17A398; /* accent fills, indicators, focus ring — never text on white */
  --sd-teal-ink:   #0E6F68; /* teal for text, links and primary buttons (5.2:1 on white) */
  --sd-surface:    #F3F7F6; /* app canvas, resting rows, placeholder ground */
  --sd-paper:      #FFFFFF; /* panels, rows, inputs */
  --sd-slate:      #5E7B7D; /* secondary text (4.6:1 on paper) */
  --sd-hairline:   #DCE6E4; /* rules and dividers only */

  /* Sidebar (on --sd-ink) */
  --sd-ink-active: #143F45;
  --sd-ink-hover:  #12383E;
  --sd-on-ink:     #EAF2F1;
  --sd-on-ink-dim: #9FBCBB;

  /* Placeholder / awaiting-data */
  --sd-dashed:     #C6D6D4;

  /* Type — system sans only */
  --sd-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sd-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sd-text-xs:  11px; /* mono eyebrows, uppercase labels */
  --sd-text-sm:  13px; /* meta, helper copy */
  --sd-text-base:15px; /* body, row titles, inputs */
  --sd-text-lg:  17px;
  --sd-text-h2:  19px;
  --sd-text-h1:  28px;
  --sd-leading-tight: 1.25;
  --sd-leading-body:  1.6;

  /* Space — 4px base */
  --sd-1: 4px;  --sd-2: 8px;  --sd-3: 12px; --sd-4: 16px;
  --sd-5: 20px; --sd-6: 24px; --sd-8: 32px; --sd-10: 40px;

  /* Geometry */
  --sd-radius: 2px;         /* squared panels; mobile navigation is the explicit pill exception */
  --sd-dock-radius: 999px;
  --sd-dock-width: 408px;
  --sd-dock-height: 70px;   /* 56px target + 6px padding + 1px border on each side */
  --sd-dock-gap: 12px;
  --sd-dock-border: #1B4A51;
  --sd-dock-label: #C9DCDA;
  --sd-dock-shadow: 0 2px 10px rgb(12 46 51 / 18%);
  --sd-border: 1px solid var(--sd-hairline);
  --sd-target: 44px;        /* minimum touch target */
  --sd-rail: 232px;         /* sidebar width above the 44rem breakpoint */
  --sd-measure: 1060px;     /* max content width */
  --sd-pad-view: clamp(18px, 3.5vw, 36px);

  /* Motion — state feedback only */
  --sd-motion: 120ms ease;
}

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

body {
  margin: 0;
  background: var(--sd-surface);
  color: var(--sd-ink);
  font-family: var(--sd-font);
  font-size: var(--sd-text-base);
  line-height: var(--sd-leading-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sd-teal-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--sd-ink); }

:focus-visible { outline: 2px solid var(--sd-teal); outline-offset: 2px; }

button, input, textarea, select { font: inherit; color: inherit; }
button, [role="tab"], a.sd-btn { min-height: var(--sd-target); }

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

/* Media-query-free rail: the sidebar sits at --sd-rail above 44rem and goes
   full width below it; nav items stack in the rail and sit in a row on phone. */
.sd-shell { display: flex; flex-wrap: wrap; align-items: flex-start; min-height: 100vh; }
.sd-rail  { width: calc((44rem - 100%) * 999); min-width: var(--sd-rail); max-width: 100%;
            align-self: stretch; background: var(--sd-ink); }
.sd-main  { flex: 1 1 320px; min-width: 0; width: 100%; padding: var(--sd-pad-view); }
.sd-nav-item { flex-grow: 1; flex-basis: calc((15rem - 100%) * 999); max-width: 100%; min-width: 0; }

/* Awaiting-data value: an em dash always carries its meaning next to it. */
.sd-awaiting { color: var(--sd-slate); font-variant-numeric: tabular-nums; }