/* ============================================================
   EMET • Token system
   Multi-tenant commerce OS — same tokens skin shell + listings.
   Tenants override variables only. Selectors are universal.
   ============================================================ */

/* ------------------------------------------------------------
   Accessibility floors (NOT themable).
   Tenants cannot violate these.
   ------------------------------------------------------------ */
:root {
  --hit-min: 44px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --min-tap-spacing: 8px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Type scale (modular, not themable — theme controls family) */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-display: 64px;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* Z layers */
  --z-rail: 10;
  --z-header: 20;
  --z-sheet: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* ============================================================
   THEME 1 — EMET HOUSE  (neutral, professional default)
   ============================================================ */
:root,
/* ============================================================
   Marketplace identity palette — peers, theme-invariant.
   Used by the Connect tile grid and wizard headers. NOT used
   for channel pips (those map data-side to --ch-N slots).
   ============================================================ */
:root {
  --mp-ebay-ca:    #e53238;
  --mp-ebay-us:    #0064d2;
  --mp-bricklink:  #02538a;
  --mp-discogs:    #333333;
  --mp-etsy:       #f1641e;
  --mp-mercari:    #ff5a5f;
  --mp-shopify:    #95bf47;
  --mp-amazon:     #ff9900;
  --mp-poshmark:   #b51e3b;
  --mp-reverb:     #ff6e3c;
  --mp-mp-ink:     #ffffff; /* fg color used on top of --mp-* tiles */
}

[data-theme="house"] {
  --tenant-name: "EMET";
  --tenant-tagline: "Operating system for working resellers";
  --tenant-mark-bg: #1a1a1a;
  --tenant-mark-fg: #f6f5f1;

  /* Channel palette — peers, not brand. Data layer maps channels to slots. */
  --ch-1: #2c5f6f;  /* deep teal */
  --ch-2: #6e3a5e;  /* muted plum */
  --ch-3: #876a30;  /* muted ochre */
  --ch-4: #3e6346;  /* forest */
  --ch-5: #883c30;  /* brick */
  --ch-6: #3a4878;  /* indigo */
  --ch-unallocated: #d6d3c8;

  /* Surfaces — warm white, paper-like */
  --surface: #f6f5f1;
  --surface-raised: #ffffff;
  --surface-sunk: #ecebe5;
  --surface-inverse: #1a1a1a;
  --surface-overlay: rgba(20, 20, 18, 0.45);

  /* Ink */
  --ink: #141413;
  --ink-muted: #5b5a55;
  --ink-subtle: #8d8b83;
  --ink-inverse: #f6f5f1;

  /* Lines */
  --line: #dedcd3;
  --line-strong: #c2c0b6;

  /* Accent — graphite, restrained */
  --accent: #1a1a1a;
  --accent-ink: #f6f5f1;
  --accent-soft: #ecebe5;
  --accent-line: #1a1a1a;
  --row-selected: #ecebe5;
  --row-selected-line: var(--ink);

  /* Status */
  --positive: #27613e;
  --positive-soft: #dceadd;
  --warn: #8a5a14;
  --warn-soft: #f1e6c8;
  --danger: #8a1f1f;
  --danger-soft: #f1d8d4;

  --focus-ring: #1a1a1a;

  /* Typography */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display-tracking: var(--tracking-tight);
  --display-weight: 600;
  --text-weight: 400;
  --caps-weight: 600;

  /* Shape */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 0 rgba(20, 20, 18, 0.04), 0 0 0 1px rgba(20, 20, 18, 0.04);
  --shadow-2: 0 4px 14px -6px rgba(20, 20, 18, 0.12), 0 0 0 1px rgba(20, 20, 18, 0.06);
  --shadow-3: 0 18px 40px -16px rgba(20, 20, 18, 0.22), 0 0 0 1px rgba(20, 20, 18, 0.06);
}

/* ============================================================
   THEME 2 — MERIDIAN SUPPLY  (bold, graphic, modern)
   A geometric, saturated tenant. Cobalt + electric chartreuse,
   sharp corners, hard shadows.
   ============================================================ */
[data-theme="meridian"] {
  --tenant-name: "MERIDIAN";
  --tenant-tagline: "Supply Co. — direct, no middlemen";
  --tenant-mark-bg: #102bff;
  --tenant-mark-fg: #e8ff5e;

  /* Channel palette — saturated peers */
  --ch-1: #ff3d00;
  --ch-2: #00b774;
  --ch-3: #ffb800;
  --ch-4: #c800ff;
  --ch-5: #00b8e8;
  --ch-6: #ff006e;
  --ch-unallocated: #cdcbc4;

  /* Surfaces */
  --surface: #f3f2ef;
  --surface-raised: #ffffff;
  --surface-sunk: #e6e4de;
  --surface-inverse: #0a1240;
  --surface-overlay: rgba(10, 18, 64, 0.55);

  /* Ink */
  --ink: #0a1240;
  --ink-muted: #4a4f7a;
  --ink-subtle: #8388a8;
  --ink-inverse: #ffffff;

  /* Lines */
  --line: #0a1240;
  --line-strong: #0a1240;

  /* Accent */
  --accent: #102bff;
  --accent-ink: #e8ff5e;
  --accent-soft: #e8ff5e;
  --accent-line: #0a1240;
  /* Row selection — calmed for high-density tables; chartreuse stays on tenant mark + primary */
  --row-selected: #dce0ff;
  --row-selected-line: #102bff;

  /* Status */
  --positive: #064d2c;
  --positive-soft: #b9f2c7;
  --warn: #8a4a00;
  --warn-soft: #ffd574;
  --danger: #c1121f;
  --danger-soft: #ffd0d0;

  --focus-ring: #102bff;

  /* Typography */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display-tracking: -0.025em;
  --display-weight: 700;
  --text-weight: 450;
  --caps-weight: 700;

  /* Shape — sharp */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  /* Shadow — hard, offset */
  --shadow-1: 2px 2px 0 #0a1240;
  --shadow-2: 4px 4px 0 #0a1240;
  --shadow-3: 8px 8px 0 #0a1240;
}

/* ============================================================
   THEME 3 — FOUNDRY & FIELD  (warm, archival, editorial)
   Cream paper, iron ink, ochre, serif heads. Suited to vintage,
   collectible, ephemera. Analog feel without category bias.
   ============================================================ */
[data-theme="foundry"] {
  --tenant-name: "Foundry & Field";
  --tenant-tagline: "Considered goods, kept for keeps";
  --tenant-mark-bg: #2b2924;
  --tenant-mark-fg: #f3ead6;

  /* Channel palette — earthy peers */
  --ch-1: #6e4a2a;
  --ch-2: #4a5a2a;
  --ch-3: #8a4a14;
  --ch-4: #2c4a52;
  --ch-5: #6e2a3a;
  --ch-6: #5a4a2a;
  --ch-unallocated: #cfc3a3;

  /* Surfaces */
  --surface: #efe7d3;
  --surface-raised: #f7f1de;
  --surface-sunk: #e3d9bf;
  --surface-inverse: #2b2924;
  --surface-overlay: rgba(43, 41, 36, 0.5);

  /* Ink */
  --ink: #2b2924;
  --ink-muted: #6f685a;
  --ink-subtle: #998f7c;
  --ink-inverse: #f3ead6;

  /* Lines */
  --line: #c9bd9c;
  --line-strong: #a89b7a;

  /* Accent — iron */
  --accent: #2b2924;
  --accent-ink: #efe7d3;
  --accent-soft: #e3d9bf;
  --accent-line: #2b2924;
  --row-selected: #e3d9bf;
  --row-selected-line: var(--ink);

  /* Status */
  --positive: #4a5a2a;
  --positive-soft: #d8de9b;
  --warn: #8a4a14;
  --warn-soft: #ecc987;
  --danger: #8a3024;
  --danger-soft: #e8baa6;

  --focus-ring: #2b2924;

  /* Typography */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-tracking: -0.005em;
  --display-weight: 500;
  --text-weight: 400;
  --caps-weight: 500;

  /* Shape — soft, generous */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadow — soft, warm */
  --shadow-1: 0 1px 0 rgba(43, 41, 36, 0.08);
  --shadow-2: 0 6px 20px -8px rgba(43, 41, 36, 0.18), 0 0 0 1px rgba(43, 41, 36, 0.06);
  --shadow-3: 0 22px 50px -20px rgba(43, 41, 36, 0.28), 0 0 0 1px rgba(43, 41, 36, 0.06);
}

/* ============================================================
   PRIMITIVES — universal across all themes.
   Theming is achieved by variable overrides, never by selector.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  font-weight: var(--text-weight);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus — always visible, always 2px. Cannot be overridden away. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Headings */
.h-display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--ink);
}
.h-display { font-size: var(--text-display); }
.h1 { font-size: var(--text-3xl); }
.h2 { font-size: var(--text-2xl); }
.h3 { font-size: var(--text-xl); }
.h4 { font-size: var(--text-lg); }

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--text-2xs);
  font-weight: var(--caps-weight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.muted { color: var(--ink-muted); }
.subtle { color: var(--ink-subtle); }

hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* Buttons — every interactive ≥ 44px */
.btn {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--caps-weight);
  letter-spacing: var(--tracking-wide);
  min-height: var(--hit-min);
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-sunk); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn--ghost {
  background: transparent;
  border-color: transparent;
}
.btn--ghost:hover { background: var(--surface-sunk); }
.btn--sm {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}
.btn--lg {
  min-height: 56px;
  padding: 0 var(--space-7);
  font-size: var(--text-base);
}
.btn--xl {
  min-height: 88px;
  padding: 0 var(--space-10);
  font-size: var(--text-lg);
  font-weight: var(--display-weight);
}

/* Inputs */
.field {
  font-family: var(--font-text);
  font-size: var(--text-base);
  min-height: var(--hit-min);
  padding: 0 var(--space-3);
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 100%;
}
.field::placeholder { color: var(--ink-subtle); }

/* Cards */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

/* Pills / chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-3);
  background: var(--surface-sunk);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--caps-weight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--solid {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.chip--positive { background: var(--positive-soft); color: var(--positive); border-color: transparent; }
.chip--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* Tenant mark */
.tenant-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--tenant-mark-bg);
  color: var(--tenant-mark-fg);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-base);
  letter-spacing: var(--display-tracking);
  flex-shrink: 0;
}

/* Image placeholder — striped, monospace label */
.placeholder-img {
  background:
    repeating-linear-gradient(
      135deg,
      var(--surface-sunk) 0px,
      var(--surface-sunk) 8px,
      var(--line) 8px,
      var(--line) 9px
    );
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  aspect-ratio: 1 / 1;
  position: relative;
}

/* Theme switcher */
.theme-switcher {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
}
.theme-switcher__btn {
  font-family: var(--font-text);
  font-size: var(--text-2xs);
  font-weight: var(--caps-weight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-muted);
  border: 0;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  min-height: 36px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.theme-switcher__btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.theme-switcher__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
}

/* Visually hidden but available to AT */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollbars stay subtle */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-pill); }
*::-webkit-scrollbar-track { background: transparent; }