/* Marketplace — premium dark theme token layer.
   BL-4296dbd1d252 marketplace visual redesign (engagement 20260720-006).

   Maps the redesign-spec palette onto the token names base.css already
   consumes, plus the marketplace brochure token families from
   brand-light.css re-derived for dark. brand-light.css stays on disk
   untouched — theme rollback is one link edit in base.html.

   Component styles for the redesign live in marketplace.css; this file is
   tokens, the Inter 700 face, and the shared page frame only. */

/* Inter 700 — hero/display weight (400/500/600 are in base.css).
   Lives here, not base.css, because base.css is shared and untouched. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Canvas & surfaces (spec palette) */
  --color-bg: #0B0F14;              /* Background */
  --color-surface: #111827;         /* Surface — panels, modules */
  --color-surface-2: #1E293B;       /* Raised surface = spec hover tier */
  --color-card: #151C28;            /* Cards (new token, redesign) */
  --color-hover: #1E293B;           /* Hover fill (new token, redesign) */

  /* Ink — three tiers per spec */
  --color-text: #F8FAFC;            /* Primary text */
  --color-text-muted: #94A3B8;      /* Secondary text */
  --color-text-faint: #64748B;      /* Muted text (new token, redesign) */

  /* Accent */
  --color-accent: #5B8CFF;
  --color-accent-hover: #7DA4FF;
  --color-accent-grad: linear-gradient(135deg, #5B8CFF, #8B5CF6);
  --color-accent-tint: rgba(91, 140, 255, 0.12);
  --color-border: rgba(255, 255, 255, 0.08);   /* spec: extremely subtle */

  /* Status — brightened for AA on dark surfaces */
  --color-error: #F87171;
  --color-positive: #4ADE80;
  --color-warning: #FBBF24;
  --color-info: #60A5FA;

  /* Price badge */
  --price-ink: #C7D6FF;
  --price-fill: rgba(91, 140, 255, 0.12);
  --price-border: rgba(91, 140, 255, 0.28);

  /* Elevation — dark shadows, soft */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.5);

  /* Radii + motion (spec: 150–200ms, subtle only) */
  --radius-card: 14px;
  --radius-button: 8px;
  --radius-pill: 999px;
  --transition-fast: 160ms ease;

  /* Code slabs — deeper than the canvas */
  --code-bg: #060A0F;
  --code-text: #C9D1F5;

  /* Per-service hues — brightened for dark, tints become translucent */
  --hue-1: #38BDF8; --hue-1-tint: rgba(56, 189, 248, 0.14);   /* sky */
  --hue-2: #A78BFA; --hue-2-tint: rgba(167, 139, 250, 0.14);  /* violet */
  --hue-3: #FBBF24; --hue-3-tint: rgba(251, 191, 36, 0.14);   /* amber */
  --hue-4: #34D399; --hue-4-tint: rgba(52, 211, 153, 0.14);   /* emerald */
  --hue-5: #FB7185; --hue-5-tint: rgba(251, 113, 133, 0.14);  /* rose */
  --hue-6: #94A3B8; --hue-6-tint: rgba(148, 163, 184, 0.14);  /* slate */

  /* Marketplace brochure tokens (DD-22 families) re-derived for dark */
  --star-ink: #FBBF24;
  --promo-ink: #FDBA74;
  --promo-fill: rgba(251, 146, 60, 0.14);
  --promo-border: rgba(251, 146, 60, 0.32);
  --chip-ink: #A9C2FF;
  --chip-fill: rgba(91, 140, 255, 0.12);
  --chip-border: rgba(91, 140, 255, 0.28);
  --radar-ink: #C4B5FD;
  --radar-fill: rgba(139, 92, 246, 0.16);
  --avail-available: var(--color-positive);
  --avail-limited: var(--color-warning);
  --avail-unavailable: var(--color-error);
  --gallery-thumb-ring: var(--color-accent);
  --buybox-total-ink: #C7D6FF;
  --verified-ink: #4ADE80;
  --verified-fill: rgba(74, 222, 128, 0.14);
}

/* ---- Shared page frame (this file loads only on marketplace) ---- */

/* Inter promoted to body (base.css body = Source Sans 3 for other apps).
   Spec body scale: 15–16px. */
body {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.9375rem;
  background: var(--color-bg);
}

/* Subtle top-of-page accent bloom — calm, not a gradient banner */
main {
  background:
    radial-gradient(1200px 400px at 50% -120px, rgba(91, 140, 255, 0.08), transparent 70%),
    var(--color-bg);
}

::selection {
  background: rgba(91, 140, 255, 0.35);
  color: var(--color-text);
}