/* ============================================================
   GlobalGameTrade — Design Tokens
   Premium-minimalist gaming marketplace.
   Two modes: "bone-luxe" (light) + "graphite" (dark).
   Single accent: deep emerald. Hairlines, no shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400&family=Onest:wght@400;500;600&family=Golos+Text:wght@400;500;600&display=swap');

:root {
  /* ---- Type families ---- */
  --font-display: 'Cormorant', Georgia, 'Times New Roman', serif;   /* high-contrast serif */
  --font-body:    'Onest', system-ui, -apple-system, sans-serif;     /* neutral grotesk */
  --font-alt:     'Golos Text', system-ui, sans-serif;               /* alt grotesk for direction B */

  /* ---- Type scale (px) ---- */
  --t-hero:    72px;
  --t-h1:      40px;
  --t-h2:      28px;
  --t-h3:      21px;
  --t-body-l:  20px;
  --t-body:    17px;
  --t-caption: 14px;
  --t-micro:   12px;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;  /* used only for display serif, never body */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --track-tight:  -0.01em;
  --track-flat:   0;
  --track-label:  0.04em;   /* small caps labels */
  --track-over:   0.18em;   /* overlines */

  /* ---- Spacing (8pt) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---- Radii (small, functional) ---- */
  --r-xs: 4px;
  --r-s:  6px;
  --r-m:  10px;
  --r-l:  14px;
  --r-pill: 999px;

  /* ---- Layout ---- */
  --maxw: 1320px;
  --pad-x: clamp(22px, 5vw, 72px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med:  280ms;
  --dur-slow: 480ms;

  /* ---- Accent (deep emerald) — constant across modes ---- */
  --accent:        #1F4E45;
  --accent-deep:   #163b34;  /* hover / press on light */
  --accent-bright: #4E9C86;  /* legible emerald for text/price on dark */
  --accent-tint:   rgba(31, 78, 69, 0.08);
  --accent-ring:   rgba(31, 78, 69, 0.32);
}

/* ===================== LIGHT — bone-luxe ===================== */
[data-theme="light"] {
  --bg:        #FAFAF8;
  --surface:   #FFFFFF;
  --surface-2: #F4F4F1;   /* sunken / subtle fill */
  --fg:        #16161A;
  --fg-2:      #6B6B70;
  --fg-3:      #9A9A9F;
  --hairline:    rgba(22, 22, 26, 0.10);
  --hairline-hi: rgba(22, 22, 26, 0.20);

  --cta-fg:     #FFFFFF;
  --cta-bg:     var(--accent);
  --cta-bg-hov: var(--accent-deep);
  --price:      var(--accent);

  --focus-ring: var(--accent-ring);
  --overlay:    rgba(22, 22, 26, 0.40);

  /* status (muted) */
  --ok:    #2E7D5B;
  --info:  #3A5E8C;
  --warn:  #8A6D2F;
  --danger:#9A3B36;

  /* duotone image treatment */
  --duo-shadow: #16161A;
  --duo-light:  #FAFAF8;
}

/* ===================== DARK — graphite ====================== */
[data-theme="dark"] {
  --bg:        #121214;
  --surface:   #1A1A1D;
  --surface-2: #202024;
  --fg:        #EDEDED;
  --fg-2:      #9A9A9F;
  --fg-3:      #6E6E73;
  --hairline:    rgba(237, 237, 237, 0.12);
  --hairline-hi: rgba(237, 237, 237, 0.24);

  --cta-fg:     #0C0C0E;
  --cta-bg:     var(--accent-bright);
  --cta-bg-hov: #5fb59c;
  --price:      var(--accent-bright);

  --focus-ring: rgba(78, 156, 134, 0.40);
  --overlay:    rgba(0, 0, 0, 0.55);

  --ok:    #4FB286;
  --info:  #6E97C9;
  --warn:  #C2A661;
  --danger:#C76A64;

  --duo-shadow: #050506;
  --duo-light:  #2A2A2E;
}

/* ===================== Base resets ===================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 0;
}

/* tabular numbers for prices/quantities */
.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, p { margin: 0; }

/* ---- Display helpers ---- */
.display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
}
.overline {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-over);
  color: var(--fg-3);
  font-weight: var(--w-medium);
}
.label-cap {
  font-size: var(--t-caption);
  letter-spacing: var(--track-label);
  color: var(--fg-2);
}

/* ---- Focus ring (functional shadow, only allowed shadow) ---- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--r-s);
}

/* ============================================================
   COMPONENT PRIMITIVES
   ============================================================ */

/* Buttons */
.btn {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
}
.btn:active { transform: scale(0.985); }

.btn--cta {
  background: var(--cta-bg);
  color: var(--cta-fg);
}
.btn--cta:hover { background: var(--cta-bg-hov); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--hairline-hi);
}
.btn--ghost:hover { border-color: var(--fg); }

.btn--quiet {
  background: transparent;
  color: var(--fg-2);
  padding: 10px 14px;
  min-height: 40px;
}
.btn--quiet:hover { color: var(--fg); }

.btn--sm { padding: 9px 16px; min-height: 40px; font-size: var(--t-caption); }
.btn--block { display: flex; width: 100%; }

/* Inputs & selects */
.field {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-m);
  padding: 13px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field::placeholder { color: var(--fg-3); }
.field:hover { border-color: var(--hairline-hi); }
.field:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%236B6B70' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-l);
  transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.card--hover:hover { border-color: var(--hairline-hi); transform: translateY(-2px); }

/* Badge (thin status) */
.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: none;
  gap: 6px;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: transparent;
}
.badge .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.badge--ok    { color: var(--ok); }
.badge--info  { color: var(--info); }
.badge--warn  { color: var(--warn); }
.badge--danger{ color: var(--danger); }

/* Hairline divider used sparingly (not <hr>) */
.rule { height: 1px; background: var(--hairline); border: 0; width: 100%; }

/* Duotone image frame */
.duo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.duo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
}
.duo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media (max-width: 760px) {
  :root {
    --t-hero: 42px;
    --t-h1: 34px;
    --t-h2: 25px;
    --t-h3: 20px;
    --t-body-l: 18px;
    --t-body: 16px;
    --t-caption: 13px;
    --t-micro: 11px;
    --pad-x: 20px;
  }
}