/* ════════════════════════════════════════════════════════════════════════
   eca-theme.css — Elite Core shared design tokens + primitives
   ────────────────────────────────────────────────────────────────────────
   Extracted from the Stock Central dashboard
   (stock-central-html/eca_inventory_dashboard_202_LIVEFILE.html,
    APP_VERSION 2026.06.16.29) so the Returns Portal matches Stock Central
   exactly, and so the dashboard can later adopt this same file.

   Structure mirrors the source:
     Layer 1  Surface tokens (no semantic color)
     Layer 2  Palette RGB triplets  ← SOURCE OF TRUTH for semantic color
     Layer 3  Palette solids + tints + borders (derived from triplets)
     Layer 4  Role bindings (the portal references these, not raw palette)
     Layer 5  Legacy bridges (kept for parity with the dashboard)
     Presets  high-contrast / deuteranopia / tritanopia  (body.theme-*)
     A11y     focus-visible, reduced-motion, skip-link, sr-only, scrollbar
     Portal   .eca-* component primitives (buttons, inputs, card, modal)

   The Elite Core brand action color is gold (--role-cta-primary / --b2-yellow,
   #ffd60a) with dark text. Do not hardcode hexes in portal CSS — reference
   the tokens below so theme presets and future rebrands cascade for free.
   ════════════════════════════════════════════════════════════════════════ */

/* Brand typeface — Avenir Next (from the Elite Core brand guide). */
@font-face { font-family: 'Avenir Next'; src: url('/assets/fonts/AvenirNext-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Avenir Next'; src: url('/assets/fonts/AvenirNext-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Avenir Next'; src: url('/assets/fonts/AvenirNext-DemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Avenir Next'; src: url('/assets/fonts/AvenirNext-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ─── Layer 1: Surface tokens (no semantic colors). */
  --b2-bg: #141416;
  --b2-surface-0: #1a1a1d;
  --b2-surface-1: #1c1c1f;
  --b2-surface-2: #242427;
  --b2-surface-3: #2c2c30;
  --b2-hairline: rgba(255,255,255,0.07);
  --b2-hairline-strong: rgba(255,255,255,0.12);
  --b2-text: #f5f5f7;
  --b2-text-2: #a1a1a6;
  --b2-text-3: #8e8e95; /* a11y: clears WCAG AA 4.5:1 on dark surface */
  --b2-text-4: #6e6e73; /* decorative fills only, not body text */

  /* ─── Layer 2: Palette RGB triplets — SOURCE OF TRUTH. Presets override
     these and the change cascades through every layer below. */
  --b2-red-rgb:    255, 69, 58;
  --b2-amber-rgb:  255, 159, 10;
  --b2-blue-rgb:   10, 132, 255;
  --b2-teal-rgb:   17, 153, 171;
  --b2-green-rgb:  48, 209, 88;
  --b2-yellow-rgb: 255, 214, 10;
  --b2-purple-rgb: 192, 132, 252;
  --b2-orange-rgb: 251, 146, 60;
  --b2-pink-rgb:   236, 72, 153;

  /* ─── Layer 3: Palette solids + tints + borders, derived from triplets. */
  --b2-red:           rgb(var(--b2-red-rgb));
  --b2-red-bg:        rgba(var(--b2-red-rgb), 0.12);
  --b2-red-border:    rgba(var(--b2-red-rgb), 0.32);
  --b2-amber:         rgb(var(--b2-amber-rgb));
  --b2-amber-bg:      rgba(var(--b2-amber-rgb), 0.12);
  --b2-amber-border:  rgba(var(--b2-amber-rgb), 0.32);
  --b2-blue:          rgb(var(--b2-blue-rgb));
  --b2-blue-bg:       rgba(var(--b2-blue-rgb), 0.14);
  --b2-blue-border:   rgba(var(--b2-blue-rgb), 0.34);
  --b2-teal:          rgb(var(--b2-teal-rgb));
  --b2-teal-bg:       rgba(var(--b2-teal-rgb), 0.14);
  --b2-teal-border:   rgba(var(--b2-teal-rgb), 0.34);
  --b2-green:         rgb(var(--b2-green-rgb));
  --b2-green-bg:      rgba(var(--b2-green-rgb), 0.14);
  --b2-green-border:  rgba(var(--b2-green-rgb), 0.30);
  --b2-yellow:        rgb(var(--b2-yellow-rgb));
  --b2-yellow-bg:     rgba(var(--b2-yellow-rgb), 0.12);
  --b2-yellow-border: rgba(var(--b2-yellow-rgb), 0.32);
  --b2-purple:        rgb(var(--b2-purple-rgb));
  --b2-purple-bg:     rgba(var(--b2-purple-rgb), 0.12);
  --b2-purple-border: rgba(var(--b2-purple-rgb), 0.32);
  --b2-orange:        rgb(var(--b2-orange-rgb));
  --b2-orange-bg:     rgba(var(--b2-orange-rgb), 0.12);
  --b2-orange-border: rgba(var(--b2-orange-rgb), 0.32);
  --b2-pink:          rgb(var(--b2-pink-rgb));
  --b2-pink-bg:       rgba(var(--b2-pink-rgb), 0.14);
  --b2-pink-border:   rgba(var(--b2-pink-rgb), 0.36);

  /* ─── Layer 4: Role bindings — the portal references THESE. Semantic
     roles relevant to a returns flow are mapped from the shared palette. */
  --role-cta-primary:        var(--b2-yellow);   /* primary action (gold) */
  --role-cta-primary-bg:     var(--b2-yellow-bg);
  --role-cta-primary-border: var(--b2-yellow-border);
  --role-danger:             var(--b2-red);      /* reject / destructive */
  --role-danger-bg:          var(--b2-red-bg);
  --role-danger-border:      var(--b2-red-border);
  --role-success:            var(--b2-green);    /* resolved / refunded */
  --role-success-bg:         var(--b2-green-bg);
  --role-success-border:     var(--b2-green-border);
  --role-pending:            var(--b2-amber);    /* awaiting / in review */
  --role-pending-bg:         var(--b2-amber-bg);
  --role-pending-border:     var(--b2-amber-border);
  --role-info:               var(--b2-blue);     /* in transit / links */
  --role-info-bg:            var(--b2-blue-bg);
  --role-info-border:        var(--b2-blue-border);
  --role-warranty:           var(--b2-teal);     /* warranty claims */
  --role-warranty-bg:        var(--b2-teal-bg);
  --role-warranty-border:    var(--b2-teal-border);

  /* Brand-mark — LOCKED (matches the dashboard; not user-themeable). */
  --brand-mark-1: #ffd60a;
  --brand-mark-2: #ffb84d;

  /* ─── Layer 5: Legacy bridges (parity with the dashboard's older surfaces). */
  --yellow:     var(--role-cta-primary);
  --dark-gray:  var(--b2-bg);
  --teal:       var(--b2-teal);
  --white:      var(--b2-text);

  /* ─── Portal-specific aliases (semantic names the portal markup uses). */
  --eca-font: 'Avenir Next', 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --eca-on-primary: #1a1300;          /* dark text on gold (matches skip-link) */
  --eca-radius-control: 12px;         /* buttons / inputs */
  --eca-radius-surface: 20px;         /* cards / modals */
  --eca-radius-chip: 7px;
  --eca-shadow-modal: 0 24px 56px rgba(20,20,22,0.55), 0 2px 8px rgba(20,20,22,0.40);
  --eca-logo-url: url("https://store-hl2y6bk82c.mybigcommerce.com/content/EC%20Logo%20-%20Full%20Color%20-%20Horizontal_Sticker.svg");
}

/* ════════════════════════════════════════════════════════════════════════
   THEME PRESETS — set as a class on <body> (e.g. <body class="theme-deuteranopia">).
   Each overrides palette triplets only; everything else cascades.
   ════════════════════════════════════════════════════════════════════════ */

/* High-Contrast — boosted saturation; all colors hit WCAG AA on dark. */
body.theme-high-contrast {
  --b2-red-rgb:    255, 80, 64;
  --b2-amber-rgb:  255, 176, 32;
  --b2-blue-rgb:   74, 163, 255;
  --b2-teal-rgb:   93, 196, 216;
  --b2-green-rgb:  80, 221, 112;
  --b2-yellow-rgb: 255, 224, 64;
  --b2-purple-rgb: 212, 154, 255;
  --b2-orange-rgb: 255, 164, 80;
  --b2-text:   #ffffff;
  --b2-text-2: #c5c5cb;
  --b2-text-3: #8e8e95;
  --b2-text-4: #5e5e65;
  --b2-hairline:        rgba(255,255,255,0.14);
  --b2-hairline-strong: rgba(255,255,255,0.22);
}

/* Deuteranopia — red-green color blindness (Okabe-Ito base). */
body.theme-deuteranopia {
  --b2-red-rgb:    213, 94, 0;     /* vermillion */
  --b2-amber-rgb:  230, 159, 0;
  --b2-blue-rgb:   0, 114, 178;
  --b2-teal-rgb:   0, 158, 115;
  --b2-green-rgb:  86, 180, 233;   /* sky-blue for "success" */
  --b2-yellow-rgb: 240, 228, 66;
  --b2-purple-rgb: 204, 121, 167;
  --b2-orange-rgb: 230, 159, 0;
}

/* Tritanopia — blue-yellow color blindness. */
body.theme-tritanopia {
  --b2-red-rgb:    255, 69, 58;
  --b2-amber-rgb:  255, 105, 97;
  --b2-blue-rgb:   178, 118, 178;
  --b2-teal-rgb:   72, 169, 138;
  --b2-green-rgb:  48, 209, 88;
  --b2-yellow-rgb: 251, 113, 133;
  --b2-purple-rgb: 159, 122, 234;
  --b2-orange-rgb: 220, 76, 100;
}

/* ════════════════════════════════════════════════════════════════════════
   BASE + A11Y BASELINE (carried over from the dashboard)
   ════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--eca-font);
  background: var(--b2-bg);
  color: var(--b2-text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Visible keyboard focus on every interactive element. */
:focus-visible {
  outline: 2px solid var(--role-cta-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
[data-no-focus-ring]:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: fixed;
  top: -100px; left: 12px;
  z-index: 100000;
  padding: 10px 16px;
  background: var(--role-cta-primary);
  color: var(--eca-on-primary);
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 12px; outline-offset: 2px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* ════════════════════════════════════════════════════════════════════════
   PORTAL COMPONENT PRIMITIVES (.eca-*) — token-driven, derived from the
   dashboard's modal/button/input styling. Prefixed to avoid clashing with
   dashboard class names if this file is ever loaded alongside the LIVEFILE.
   ════════════════════════════════════════════════════════════════════════ */

.eca-logo {
  height: 22px; width: auto;
  background: var(--eca-logo-url) left center / contain no-repeat;
}

/* Buttons */
.eca-btn {
  appearance: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  border-radius: var(--eca-radius-control);
  padding: 11px 20px;
  cursor: pointer;
  transition: background .16s, box-shadow .16s, opacity .16s, transform .12s;
}
.eca-btn:hover { transform: translateY(-1px); }
.eca-btn[aria-disabled="true"],
.eca-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.eca-btn-primary {
  background: var(--role-cta-primary);
  color: var(--eca-on-primary);
  font-weight: 700;
  padding: 11px 24px;
}
.eca-btn-secondary {
  background: var(--b2-surface-3);
  color: var(--b2-text);
}
.eca-btn-danger {
  background: transparent;
  color: var(--role-danger);
  border: 1px solid var(--role-danger-border);
  font-weight: 600;
}

/* Inputs */
.eca-input,
.eca-select,
.eca-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--b2-text);
  background: var(--b2-surface-2);
  border: 1px solid var(--b2-hairline-strong);
  border-radius: var(--eca-radius-control);
  padding: 11px 14px;
  transition: border-color .16s, box-shadow .16s;
}
.eca-input::placeholder,
.eca-textarea::placeholder { color: var(--b2-text-3); }
.eca-input:focus,
.eca-select:focus,
.eca-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--role-cta-primary) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-cta-primary) 22%, transparent);
}
.eca-label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--b2-text-2);
  margin-bottom: 6px;
}

/* Surfaces */
.eca-card {
  background: var(--b2-surface-1);
  border: 1px solid var(--b2-hairline);
  border-radius: var(--eca-radius-surface);
  padding: 20px;
}
.eca-modal {
  width: 648px;
  max-width: 94vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--b2-surface-2);
  border: 1px solid var(--b2-hairline-strong);
  border-radius: var(--eca-radius-surface);
  box-shadow: var(--eca-shadow-modal);
}

/* Status chips — map a returns status family to its semantic role color.
   Usage: <span class="eca-chip eca-chip-success">Refunded</span> */
.eca-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.eca-chip-pending  { color: var(--role-pending);  background: var(--role-pending-bg);  border-color: var(--role-pending-border); }
.eca-chip-info     { color: var(--role-info);     background: var(--role-info-bg);     border-color: var(--role-info-border); }
.eca-chip-success  { color: var(--role-success);  background: var(--role-success-bg);  border-color: var(--role-success-border); }
.eca-chip-danger   { color: var(--role-danger);   background: var(--role-danger-bg);   border-color: var(--role-danger-border); }
.eca-chip-warranty { color: var(--role-warranty); background: var(--role-warranty-bg); border-color: var(--role-warranty-border); }