/* ════════════════════════════════════════════════════════════════
   LewJonesssTCG — Design System
   Single stylesheet: brand tokens (color, type, spacing, effects) + base.
   Sourced 1:1 from the claude.ai/design project token files.
   ════════════════════════════════════════════════════════════════ */

/* ── Webfont: Hanken Grotesk (the brand's single-family type system) ── */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════════════
   Color tokens — anchored on brand purple #430251 (sampled from logo).
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand purple scale ─────────────────────────── */
  --purple-950: #2a0233;
  --purple-900: #430251; /* PRIMARY brand color */
  --purple-800: #571666;
  --purple-700: #6e2a7e; /* lit "business-card" purple */
  --purple-600: #8a3f9b;
  --purple-500: #a359b4;
  --purple-400: #be80cc;
  --purple-300: #d8ace2;
  --purple-200: #ecd3f0;
  --purple-100: #f6e9f8;
  --purple-50:  #fbf5fc;

  /* ── Ink / neutrals (faint purple tint) ─────────── */
  --ink-950: #150b1a;
  --ink-900: #1f1426;
  --ink-800: #2e2236;
  --ink-700: #463a4f;
  --ink-600: #61556b;
  --ink-500: #847a8d;
  --ink-400: #a99fb1;
  --ink-300: #cbc4d1;
  --ink-200: #e4dfe9;
  --ink-100: #f1eef4;
  --ink-50:  #faf8fb;
  --white:   #ffffff;

  /* ── Gold — premium / foil / "rare pull" accent ──── */
  --gold-600: #b7891c;
  --gold-500: #e0a92e;
  --gold-400: #efc152;
  --gold-100: #fbefcf;

  /* ── Semantic status ────────────────────────────── */
  --green-600: #237a46;
  --green-500: #2e9e5b;
  --green-100: #dcf3e5;
  --red-600:   #b22a3a;
  --red-500:   #d63a4b;
  --red-100:   #fbe2e4;
  --blue-600:  #2a5fb0;
  --blue-500:  #3d78d4;
  --blue-100:  #e1ecfb;

  /* ── TCG rarity tiers ───────────────────────────── */
  --rarity-common:    #847a8d;
  --rarity-uncommon:  #2e9e5b;
  --rarity-rare:      #3d78d4;
  --rarity-epic:      #8a3f9b;
  --rarity-legendary: #e0a92e;

  /* ── Semantic aliases ───────────────────────────── */
  --color-bg:              var(--ink-50);
  --color-surface:         var(--white);
  --color-surface-subtle:  var(--purple-50);
  --color-surface-sunken:  var(--ink-100);
  --color-surface-brand:   var(--purple-900);
  --color-surface-inverse: var(--ink-950);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-inverse:   var(--white);
  --text-brand:     var(--purple-900);
  --text-on-brand:  var(--white);
  --text-link:      var(--purple-700);
  --text-accent:    var(--gold-600);

  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-400);
  --border-brand:   var(--purple-900);

  --focus-ring:     var(--purple-500);
  --color-accent:   var(--gold-500);
  --color-overlay:  rgba(21, 11, 26, 0.55);

  /* ════════════════════════════════════════════════════════════════
     Typography tokens — single-family system (Hanken Grotesk).
     ════════════════════════════════════════════════════════════════ */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  4rem;      /* 64 */
  --text-6xl:  5.5rem;    /* 88 */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-xbold:   800;
  --weight-black:   900;

  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.14em; /* eyebrow / overline caps */

  /* ════════════════════════════════════════════════════════════════
     Spacing & layout tokens (4px base grid).
     ════════════════════════════════════════════════════════════════ */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Radii — editorial/Swiss: crisp corners, not soft pills */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;   /* default card radius */
  --radius-xl:   10px;
  --radius-2xl:  14px;
  --radius-pill: 999px; /* reserved for small status tags only */

  /* Containers */
  --container-sm: 640px;
  --container-md: 920px;
  --container-lg: 1200px;
  --container-xl: 1320px;

  /* Control sizing */
  --control-h-sm: 36px;
  --control-h-md: 44px;  /* default — meets 44px touch target */
  --control-h-lg: 56px;

  /* ════════════════════════════════════════════════════════════════
     Elevation, motion & effect tokens.
     Shadows tinted with brand ink (#1f1426) — never neutral gray-black.
     ════════════════════════════════════════════════════════════════ */
  /* Restrained, neutral elevation — editorial relies on hairline borders, not drop shadows */
  --shadow-xs:    0 1px 2px rgba(31, 20, 38, 0.05);
  --shadow-sm:    0 1px 2px rgba(31, 20, 38, 0.06);
  --shadow-md:    0 2px 8px rgba(31, 20, 38, 0.07);
  --shadow-lg:    0 6px 18px rgba(31, 20, 38, 0.09);
  --shadow-xl:    0 12px 32px rgba(31, 20, 38, 0.12);

  /* No coloured glows — kept as aliases so existing references stay neutral */
  --shadow-brand: 0 2px 8px rgba(31, 20, 38, 0.10);
  --shadow-gold:  0 2px 8px rgba(31, 20, 38, 0.10);

  /* Focus ring */
  --ring-focus: 0 0 0 3px rgba(163, 89, 180, 0.45);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Gradients — foil sheen, brand panel, gold accent */
  --gradient-foil:  linear-gradient(120deg, var(--purple-700) 0%, var(--purple-900) 42%, var(--purple-950) 100%);
  --gradient-brand: linear-gradient(135deg, var(--purple-800) 0%, var(--purple-950) 100%);
  --gradient-gold:  linear-gradient(120deg, var(--gold-400) 0%, var(--gold-600) 100%);
}

/* ════════════════════════════════════════════════════════════════
   Base element styles & helpers.
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Numbers are first-class: tabular figures so prices, grades & counts align. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
  text-transform: none;
}
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin: 0;
}
p { margin: 0; }

a { color: inherit; text-decoration: none; }

/* Numeral / stat helper — tabular figures for stat-line alignment */
.lj-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Eyebrow / overline */
.lj-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-brand);
}

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }

::selection { background: var(--purple-200); color: var(--purple-950); }

/* ───────────────────────────────────────────────────────────────
   Shop category dropdown (shared across index / shop / sell headers)
   CSS-only nested hover menu: Shop ▾ opens a panel; each language
   group's "Sealed ▸" row opens a side flyout with its sub-tiers.
   The trigger→panel gap is bridged by a narrow ::after the width of
   the trigger ONLY — not by the full-width panel — so the bridge never
   sits under the neighbouring nav links. (A full-width transparent
   bridge made the open panel's invisible top band overlap "Sell"/
   "Contact"; tiny vertical wobbles while moving between nav items kept
   crossing that edge and flicked the menu open/closed.)
   ─────────────────────────────────────────────────────────────── */
.lj-shop-menu { position: relative; display: inline-flex; }
.lj-shop-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-700); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.lj-shop-menu:hover .lj-shop-trigger { color: var(--purple-900); }
/* Hover-intent: open is instant, close waits this grace period so a brief
   slip across a dead pixel (diagonal entry into the card, sub-frame gaps)
   doesn't flick the menu shut. Re-entering within the grace cancels it. */
.lj-shop-menu { --shop-close-delay: 140ms; }
.lj-shop-chev {
  transition: transform var(--dur-fast) var(--ease-standard);
  transition-delay: var(--shop-close-delay);
}
.lj-shop-menu:hover .lj-shop-chev { transform: rotate(180deg); transition-delay: 0s; }

/* Narrow hover bridge: spans the trigger width only and fills the 14px
   gap down to the panel card, so moving straight down keeps the menu
   open, while moving sideways toward another nav link cleanly closes it. */
.lj-shop-menu::after {
  content: ""; position: absolute; top: 100%; left: 0;
  width: 100%; height: 16px;
}

.lj-shop-panel {
  /* margin (not padding) for the gap: the gap band is transparent AND
     non-hoverable, so the panel's hover region starts at the visible card
     and never overlaps the adjacent nav links above-right of it. */
  position: absolute; top: 100%; left: -10px; margin-top: 14px;
  min-width: 250px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              visibility var(--dur-fast) var(--ease-standard);
  transition-delay: var(--shop-close-delay);   /* grace period on close */
}
.lj-shop-menu:hover .lj-shop-panel,
.lj-shop-menu:focus-within .lj-shop-panel { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }

.lj-shop-card {
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 10px;
}
.lj-shop-grouplabel {
  padding: 9px 12px 4px; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.lj-shop-div { height: 1px; background: var(--border-subtle); margin: 8px 6px; }
.lj-shop-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.875rem;
  color: var(--ink-700); text-transform: none; letter-spacing: 0;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.lj-shop-link:hover { background: var(--purple-50); color: var(--purple-900); }

/* Sealed row + its side flyout */
.lj-shop-sub { position: relative; }
.lj-flyout {
  position: absolute; top: -10px; left: 100%; padding-left: 10px;
  min-width: 200px; z-index: 61;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              visibility var(--dur-fast) var(--ease-standard);
  transition-delay: var(--shop-close-delay);   /* grace period on close */
}
.lj-shop-sub:hover .lj-flyout { opacity: 1; visibility: visible; transform: translateX(0); transition-delay: 0s; }

/* Below the mobile breakpoint the hover panel is suppressed; the Shop
   trigger still works as a plain link to the shop landing. */
@media (max-width: 620px) {
  .lj-shop-panel { display: none !important; }
  .lj-shop-chev { display: none; }
}

/* "Shop all …" action rows in the category dropdown */
.lj-shop-all { color: var(--purple-700); font-weight: 700; }
.lj-shop-all:hover { background: var(--purple-50); color: var(--purple-900); }