/* ==========================================================================
   DJ Shazam — Components (built on tokens.css)
   Import order: tokens.css FIRST, then this file.
   Framework-agnostic. Works in plain HTML, or as a base under React/Vue/etc.
   ========================================================================== */

/* --- Base ----------------------------------------------------------------- */
.ds-root {
  font-family: var(--font-body);
  color: var(--text-on-light);
  background: var(--bg-light);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }

/* Surface helpers — set ground + correct default text/accent context */
.surface-dark  { background: var(--bg-dark);  color: var(--text-on-dark); }
.surface-light { background: var(--bg-light); color: var(--text-on-light); }
.surface-sunken{ background: var(--surface-sunken); color: var(--text-on-light); }

/* --- Typography ----------------------------------------------------------- */
.display { font-family: var(--font-head); font-weight: var(--weight-bold);
  font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); margin: 0; }
.h1 { font-family: var(--font-head); font-weight: var(--weight-bold);
  font-size: var(--text-h1); line-height: 1.12; margin: 0; }
.h2 { font-family: var(--font-head); font-weight: var(--weight-semibold);
  font-size: var(--text-h2); line-height: 1.18; margin: 0; }
.h3 { font-family: var(--font-head); font-weight: var(--weight-semibold);
  font-size: var(--text-h3); line-height: 1.25; margin: 0; }
.body-lg { font-family: var(--font-body); font-weight: var(--weight-regular);
  font-size: var(--text-body-lg); line-height: var(--lh-body); }
.body { font-family: var(--font-body); font-weight: var(--weight-regular);
  font-size: var(--text-body); line-height: var(--lh-body); }
.caption { font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: var(--text-caption); line-height: 1.4; color: var(--text-muted); }
.surface-dark .caption { color: var(--c-mist); }   /* AA on evergreen (~5.8:1) vs muted's 2.7:1 */

/* Eyebrow / overline — Mist on dark, evergreen on light */
.eyebrow { font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-overline); letter-spacing: var(--track-overline);
  line-height: 1.3; text-transform: uppercase; color: var(--c-mist); }

/* --- Links ---------------------------------------------------------------- */
.link { color: var(--link-on-light); text-decoration: none; font-weight: var(--weight-medium); }
.link:hover { text-decoration: underline; }
.link:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.surface-dark .link { color: var(--link-on-dark); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-body); line-height: 1;
  padding: 12px 22px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.btn:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
/* Subtle hover lift + shadow — owner-approved minor deviation from §3.4's no-lift rule. */
.btn:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* Primary — evergreen fill, sandstone label (workhorse CTA). Never coral (§3.5). */
.btn--primary { background: var(--c-evergreen); color: var(--c-sandstone); }
.btn--primary:hover { background: var(--evergreen-hover); }
.btn--primary:active { background: var(--evergreen-pressed); }
/* On dark grounds the primary inverts to a sandstone fill (still not coral) for contrast. */
.surface-dark .btn--primary { background: var(--c-sandstone); color: var(--c-evergreen); }
.surface-dark .btn--primary:hover { background: var(--surface-hover); }
.surface-dark .btn--primary:active { background: var(--surface-sunken); }

/* Accent — coral, used sparingly. Surface-aware via the deep default on light. */
.btn--accent { background: var(--accent-on-light); color: #fff; }
.btn--accent:hover { background: var(--coral-hover); }
.btn--accent:active { background: var(--coral-pressed); }
.surface-dark .btn--accent { background: var(--accent-on-dark); }

/* Ghost / secondary — outline */
.btn--ghost { background: transparent; color: var(--c-evergreen); border-color: var(--border-strong); }
.btn--ghost:hover { background: rgba(15,42,36,0.06); }
.surface-dark .btn--ghost { color: var(--c-sandstone); border-color: rgba(231,222,211,0.4); }
.surface-dark .btn--ghost:hover { background: rgba(231,222,211,0.08); }

.btn:disabled, .btn[aria-disabled="true"] { color: var(--disabled-text); background: var(--surface-sunken); cursor: not-allowed; }

/* --- Card ----------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elev-1); padding: var(--space-5); }

/* --- Input ---------------------------------------------------------------- */
.input { font-family: var(--font-body); font-size: var(--text-body);
  width: 100%; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--c-charcoal); }
.input::placeholder { color: var(--disabled-text); }
.input:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; border-color: transparent; }
.label { display: block; font-size: var(--text-caption); font-weight: var(--weight-semibold);
  color: var(--text-on-light); margin-bottom: var(--space-2); }

/* --- Badge / pill --------------------------------------------------------- */
.badge { display: inline-block; font-size: var(--text-caption); font-weight: var(--weight-semibold);
  padding: 3px 12px; border-radius: var(--radius-pill);
  background: rgba(201,122,106,0.15); color: var(--accent-on-light); }

/* --- Divider -------------------------------------------------------------- */
.divider { height: 1px; background: var(--border); border: 0; }

/* --- Logo wrapper --------------------------------------------------------- */
/* Logo art is delivered as files in /assets. Use the variant that matches the
   surface (see README). Until transparent versions exist, match the tile bg
   to the file's baked-in background to avoid a visible square. */
.logo { display: inline-block; line-height: 0; }
.logo img { display: block; height: auto; }
.logo--nav img { height: 28px; }     /* min readable wordmark ~24px+ */
.logo--icon img { height: 32px; }

/* --- Recolorable inline mark (currentColor + --logo-bolt) ------------------
   Works ONLY when the SVG is INLINED in the DOM (inline <svg>, <use>/sprite,
   or a React component). <img src> SVGs ignore page CSS and will NOT recolor. */
.logo-mark { display:block; color: var(--c-evergreen); --logo-bolt: var(--c-coral-deep); }
.logo-mark svg, .logo-mark > svg { display:block; width:100%; height:100%; }
.logo-mark--primary       { color: var(--c-sandstone); --logo-bolt: var(--c-coral-base); } /* on dark */
.logo-mark--display       { color: var(--c-evergreen); --logo-bolt: var(--c-coral-deep); } /* on light */
.logo-mark--dark-utility  { color: var(--c-sandstone); --logo-bolt: currentColor; }        /* mono on dark */
.logo-mark--light-utility { color: var(--c-evergreen); --logo-bolt: currentColor; }        /* mono on light */
.logo-mark--white         { color:#fff; --logo-bolt:#fff; }
.logo-mark--black         { color:#000; --logo-bolt:#000; }