/* ==========================================================================
   Watchbid — Colors & Type
   Dark-first brand system. Night-blue canvases with an electric auction-green
   accent. Typography is system-sans with very tight negative tracking on display.
   ========================================================================== */

:root {
  /* ---------- Brand greens (the "auction" accent) ---------- */
  --brand-400: #49d89a;           /* hover/lift */
  --brand-500: #1fd38a;           /* primary accent — pills, CTAs, countdowns */
  --brand-600: #14b87a;           /* price text, "Watching" pills in-app */
  --brand-700: #0f9b67;           /* pressed / on-light */

  /* ---------- Night canvases (marketing site, app chrome) ---------- */
  --night-950: #08111f;           /* deepest bg, hero canvas */
  --night-900: #0f1b2d;           /* section bg / app footer nav */
  --night-800: #16283f;           /* elevated panel on dark */
  --navy-soft: #2a3f59;           /* quiet divider tone on dark */

  /* ---------- Surfaces (in-app, light mode screens) ---------- */
  --canvas:        #f3f6fa;       /* iOS content canvas */
  --surface:       #ffffff;       /* cards, sheets */
  --surface-soft:  #eef3f8;       /* search bars, chips */
  --surface-strong:#dfe8f1;       /* pressed surface */

  /* ---------- Ink (text on light) ---------- */
  --ink:        #0f1b2d;          /* headlines */
  --ink-soft:   #334155;          /* body */
  --ink-muted:  #64748b;          /* meta */
  --ink-inverse:#ffffff;

  /* ---------- Foreground on dark ---------- */
  --fg-headline: #f8fafc;
  --fg-copy:     rgba(226, 232, 240, 0.82);
  --fg-muted:    rgba(203, 213, 225, 0.74);
  --fg-subtle:   rgba(255, 255, 255, 0.66);

  /* ---------- Lines ---------- */
  --line:       #cbd5e1;          /* hairline on light */
  --line-soft:  #e2e8f0;          /* softer divider on light */
  --line-dark:  rgba(148, 163, 184, 0.18); /* hairline on dark */
  --line-dark-soft: rgba(255, 255, 255, 0.08);

  /* ---------- Semantic ---------- */
  --info:    #2563eb;             /* "Ships" badges */
  --danger:  #dc2626;
  --success: var(--brand-600);

  /* ---------- Shadows ---------- */
  --shadow-tight:  0 18px 36px rgba(15, 27, 45, 0.10);
  --shadow-soft:   0 24px 80px rgba(15, 27, 45, 0.12);
  --shadow-glow:   0 28px 90px rgba(8, 17, 31, 0.28);
  --shadow-screen: 0 24px 70px rgba(8, 17, 31, 0.35);
  --shadow-cta:    0 18px 40px rgba(15, 155, 103, 0.24);

  /* ---------- Radii ---------- */
  --radius-pill: 999px;
  --radius-xl:   32px;            /* hero cards, final CTA */
  --radius-lg:   24px;            /* card */
  --radius-md:   18px;            /* panel */
  --radius-sm:   14px;
  --radius-xs:   10px;

  /* ---------- Spacing scale (4/8 rhythm) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---------- Type: families ---------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type: scale (display is tight + heavy) ---------- */
  --fs-display-xl: clamp(2.9rem, 7vw, 5.5rem);  /* hero h1 */
  --fs-display-l:  clamp(2rem, 4vw, 3.4rem);    /* section title */
  --fs-display-m:  clamp(1.6rem, 3vw, 2.2rem);
  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.22rem;
  --fs-lede: 1.1rem;
  --fs-body: 1rem;
  --fs-small: 0.92rem;
  --fs-meta: 0.82rem;
  --fs-eyebrow: 0.75rem;

  --lh-display: 0.96;
  --lh-tight: 1.2;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  --tr-display: -0.05em;          /* tight negative tracking, display */
  --tr-hero:    -0.06em;          /* hero h1 */
  --tr-wordmark:-0.09em;           /* "WatchBid" set-piece */
  --tr-eyebrow:  0.24em;           /* UPPERCASE label */
}

/* ==========================================================================
   Base elements (opt-in; apply class="wb-prose" to scoped text)
   ========================================================================== */

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dark-theme body */
body.wb-dark {
  background: var(--night-950);
  color: var(--fg-headline);
  color-scheme: dark;
}

/* Semantic typographic primitives */
.wb-display,
.wb-h1,
.wb-h2,
.wb-h3,
.wb-eyebrow,
.wb-lede,
.wb-body,
.wb-meta,
.wb-mono { font-family: var(--font-sans); margin: 0; }

.wb-wordmark {
  font-size: var(--fs-display-xl);
  font-weight: 600;
  letter-spacing: var(--tr-wordmark);
  line-height: 1;
}

.wb-display {
  font-size: var(--fs-display-xl);
  font-weight: 700;
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-display);
}

.wb-h1 {
  font-size: var(--fs-display-l);
  font-weight: 650;
  letter-spacing: var(--tr-display);
  line-height: 1;
}

.wb-h2 {
  font-size: var(--fs-h2);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

.wb-h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}

.wb-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
body.wb-dark .wb-eyebrow { color: var(--fg-muted); }

.wb-lede {
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
body.wb-dark .wb-lede { color: var(--fg-copy); }

.wb-body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
body.wb-dark .wb-body { color: var(--fg-copy); }

.wb-meta {
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-muted);
}
body.wb-dark .wb-meta { color: var(--fg-muted); }

.wb-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Numeric/price emphasis */
.wb-price {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--brand-600);
  letter-spacing: -0.01em;
}