/* ============================================================================
   Parts eBay Lister — Design tokens
   The single source of truth for color, spacing, type, radii, shadows, z-index.
   Light theme is the default on :root; dark theme overrides under [data-theme="dark"]
   and (when no explicit choice is set) prefers-color-scheme: dark.
   Component CSS (app.css, charts.css) consumes only these tokens — never hardcodes
   a hex value. To re-skin the whole app, edit this one file.
   ========================================================================== */

:root {
  /* ---- Brand palette (seeded from the original inline CSS, expanded) -------
     The original app used --blue:#2456c7, --green:#177245, --red:#b3261e,
     --amber:#9a6700. Those four anchors define the hue family; the ramps below
     add the lighter/darker steps a real component library needs. */
  --blue-50:  #eef3fc;
  --blue-100: #d6e2f8;
  --blue-200: #aec5f0;
  --blue-300: #7ea3e6;
  --blue-400: #4d7fdb;
  --blue-500: #2456c7;   /* primary — the original anchor */
  --blue-600: #1d44a0;
  --blue-700: #163578;
  --blue-800: #0f2650;
  --blue-900: #081732;

  --green-50:  #e8f5ee;
  --green-100: #c8e6d4;
  --green-200: #93cfac;
  --green-300: #5cb483;
  --green-400: #2f9461;
  --green-500: #177245;  /* success — the original anchor */
  --green-600: #0f5a36;
  --green-700: #0a3f27;

  --red-50:  #fdecea;
  --red-100: #f9d4d0;
  --red-200: #efa79f;
  --red-300: #e27a6e;
  --red-400: #c84d3f;
  --red-500: #b3261e;    /* danger — the original anchor */
  --red-600: #8c1d17;
  --red-700: #5e140f;

  --amber-50:  #fdf6e3;
  --amber-100: #faecbf;
  --amber-200: #f3d985;
  --amber-300: #d9b34a;
  --amber-400: #b78d2a;
  --amber-500: #9a6700;  /* warning — the original anchor */
  --amber-600: #754e00;
  --amber-700: #4d3300;

  /* ---- Neutral ramp (cool slate, matches the original #101828 header) ------ */
  --slate-0:  #ffffff;
  --slate-50:  #f5f6f8;  /* app background — the original --bg */
  --slate-100: #eceef2;
  --slate-200: #e3e6eb;  /* the original --line */
  --slate-300: #ccd1da;
  --slate-400: #9aa3b2;
  --slate-500: #67707f;  /* the original --mut */
  --slate-600: #4a5260;
  --slate-700: #2d3441;
  --slate-800: #1b2330;  /* the original --ink */
  --slate-900: #101828;  /* the original header bg */
  --slate-950: #0a101c;

  /* ---- Semantic tokens (what components actually use) ---------------------
     Swapped wholesale for dark mode below. Components reference these, not the
     ramps above, so a theme change is a one-block edit. */
  --bg:          var(--slate-50);
  --bg-sunken:   var(--slate-100);
  --bg-raised:   var(--slate-0);
  --card:        var(--slate-0);
  --ink:         var(--slate-800);
  --ink-strong:  var(--slate-900);
  --mut:         var(--slate-500);
  --line:        var(--slate-200);
  --line-strong: var(--slate-300);

  --primary:     var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-soft:  var(--blue-50);
  --on-primary:  var(--slate-0);

  --success:     var(--green-500);
  --success-soft: var(--green-50);
  --warn:        var(--amber-500);
  --warn-soft:   var(--amber-50);
  --danger:      var(--red-500);
  --danger-soft: var(--red-50);

  /* Lifecycle state colors (every .state.<name> in app.css maps here).
     -X is the bg, -Fg is the text. Kept close to the originals so existing
     screenshots still read correctly. */
  --st-candidate-bg: var(--blue-50);     --st-candidate-fg: var(--blue-600);
  --st-review-bg:    var(--amber-50);    --st-review-fg:    var(--amber-700);
  --st-scrap-bg:     #f3e8e8;            --st-scrap-fg:     #7a4a42;
  --st-approved-bg:  var(--green-50);    --st-approved-fg:  var(--green-600);
  --st-active-bg:    var(--green-500);   --st-active-fg:    var(--slate-0);
  --st-ended-bg:     var(--slate-100);   --st-ended-fg:     var(--slate-500);
  --st-sold-bg:      #0f4c81;            --st-sold-fg:      var(--slate-0);
  --st-error-bg:     var(--red-50);      --st-error-fg:     var(--red-600);

  /* ---- Spacing scale (4px base) ------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;

  /* ---- Type scale (1.250 major third, 14px base matches the original) ------ */
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base: 14px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --lh-tight: 1.25;
  --lh-base:  1.5;
  --lh-relaxed: 1.65;

  /* ---- Radii --------------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---- Shadows (soft, layered) -------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);

  /* ---- Layout -------------------------------------------------------------- */
  --maxw: 1280px;
  --nav-h: 56px;

  /* ---- Motion -------------------------------------------------------------- */
  --t-fast: 90ms ease;
  --t-base: 160ms ease;

  /* ---- Z-index ------------------------------------------------------------ */
  --z-nav:   100;
  --z-sticky: 50;
  --z-drawer: 200;
  --z-toast:  300;
  --z-modal:  400;
}

/* ---- Dark theme ------------------------------------------------------------
   Activated by [data-theme="dark"] on <html> (set by the toggle, persisted in a
   cookie). Falls back to prefers-color-scheme when no explicit choice is set. */
:root[data-theme="dark"] {
  --bg:          var(--slate-950);
  --bg-sunken:   #060b14;
  --bg-raised:   var(--slate-900);
  --card:        var(--slate-900);
  --ink:         #cdd6e4;
  --ink-strong:  var(--slate-0);
  --mut:         var(--slate-400);
  --line:        #1f2a3d;
  --line-strong: #2f405e;

  --primary:     var(--blue-400);
  --primary-hover: var(--blue-300);
  --primary-soft:  var(--blue-900);
  --on-primary:  var(--slate-950);

  --success-soft: rgba(23, 114, 69, 0.22);
  --warn-soft:   rgba(154, 103, 0, 0.22);
  --danger-soft: rgba(179, 38, 30, 0.22);

  --st-candidate-bg: rgba(36, 86, 199, 0.18);  --st-candidate-fg: var(--blue-200);
  --st-review-bg:    rgba(154, 103, 0, 0.20);   --st-review-fg:    var(--amber-200);
  --st-scrap-bg:     rgba(179, 38, 30, 0.18);   --st-scrap-fg:     var(--red-200);
  --st-approved-bg:  rgba(23, 114, 69, 0.18);   --st-approved-fg:  var(--green-200);
  --st-active-bg:    var(--green-500);          --st-active-fg:    var(--slate-0);
  --st-ended-bg:     var(--slate-800);          --st-ended-fg:     var(--slate-400);
  --st-sold-bg:      #0f4c81;                   --st-sold-fg:      var(--slate-0);
  --st-error-bg:     rgba(179, 38, 30, 0.22);   --st-error-fg:     var(--red-200);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Auto dark mode when the user hasn't picked explicitly. The toggle sets
   data-theme; until then, respect the OS. We duplicate the dark block under
   the media query so there's exactly one definition to maintain conceptually,
   via the :root[data-theme] selector winning when both match. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          var(--slate-950);
    --bg-sunken:   #060b14;
    --bg-raised:   var(--slate-900);
    --card:        var(--slate-900);
    --ink:         #cdd6e4;
    --ink-strong:  var(--slate-0);
    --mut:         var(--slate-400);
    --line:        #1f2a3d;
    --line-strong: #2f405e;
    --primary:     var(--blue-400);
    --primary-hover: var(--blue-300);
    --primary-soft:  var(--blue-900);
    --on-primary:  var(--slate-950);
    --success-soft: rgba(23, 114, 69, 0.22);
    --warn-soft:   rgba(154, 103, 0, 0.22);
    --danger-soft: rgba(179, 38, 30, 0.22);
    --st-candidate-bg: rgba(36, 86, 199, 0.18);  --st-candidate-fg: var(--blue-200);
    --st-review-bg:    rgba(154, 103, 0, 0.20);   --st-review-fg:    var(--amber-200);
    --st-scrap-bg:     rgba(179, 38, 30, 0.18);   --st-scrap-fg:     var(--red-200);
    --st-approved-bg:  rgba(23, 114, 69, 0.18);   --st-approved-fg:  var(--green-200);
    --st-active-bg:    var(--green-500);          --st-active-fg:    var(--slate-0);
    --st-ended-bg:     var(--slate-800);          --st-ended-fg:     var(--slate-400);
    --st-sold-bg:      #0f4c81;                   --st-sold-fg:      var(--slate-0);
    --st-error-bg:     rgba(179, 38, 30, 0.22);   --st-error-fg:     var(--red-200);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.3);
  }
}