/* ============================================================
   BrockDev — Base layer
   Resets + document defaults + a few shared utility helpers.
   Pulls font / color tokens. Default document is BrockDev LIGHT
   (portfolio). Set data-brand="brockdev-dark" or "pitbot" on a
   wrapper to flip the surface ramp + accent.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--text-body);
  line-height: var(--lh-body);
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent-soft); }
[data-brand="pitbot"] ::selection { background: rgba(232,184,0,.28); color: #fff; }

/* Tabular figures wherever stats / money / standings live */
.bd-tnum { font-variant-numeric: tabular-nums; }

/* Section kicker / eyebrow */
.bd-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Warm gold hero glow (PitBox marketing) — top-right */
.pb-hero-glow {
  background:
    radial-gradient(720px 360px at 78% -20%, var(--glow-gold), transparent 60%),
    linear-gradient(180deg, #101218, var(--pb-bg));
}

/* Cool blue hero glow (BrockDev light portfolio) — top-right */
.bd-hero-glow {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(46,123,184,.09), transparent 65%),
    radial-gradient(700px 380px at -10% 30%, rgba(31,78,121,.07), transparent 60%),
    var(--paper);
}

/* ============================================================
   Component interaction states (Button / Card)
   Hover/press can't live in React inline styles, so the shared
   states ship here, keyed off the classNames the components emit.
   ============================================================ */
.bdds-btn:hover { transform: var(--hover-lift); }
.bdds-btn-primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); }
[data-brand="pitbot"] .bdds-btn-primary:hover { background: var(--gold-bright); }
.bdds-btn-gold:hover { background: var(--gold-bright); box-shadow: var(--shadow-md); }
.bdds-btn-quiet:hover { border-color: var(--accent); color: var(--accent); }
.bdds-btn-discord:hover { background: var(--discord-dark); }
.bdds-btn-google:hover { background: #f7f8f8; }
.bdds-btn:active { transform: none; }

.bdds-card-hover:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: var(--shadow-md);
  transform: var(--hover-lift);
}
[data-brand="pitbot"] .bdds-card-hover:hover,
[data-brand="brockdev-dark"] .bdds-card-hover:hover { box-shadow: var(--shadow-lift); }

@media (prefers-reduced-motion: reduce) {
  .bdds-btn:hover, .bdds-card-hover:hover { transform: none; }
}