/*
 * SessionHouse BeatStore - design tokens.
 *
 * Every value here is the real value from the design handoff, not an approximation. The
 * handoff is explicit that colour, size, tracking, radius and padding are final, so this is
 * the single place any of them may be written down. No component file may contain a raw hex
 * value or font family; there is a test that fails the build if one appears.
 *
 * Re-skinning for another install is this file and nothing else.
 */

:root {
  /* --- surface ------------------------------------------------------------ */
  --shbs-bg:      #08080B;   /* page */
  --shbs-bg2:     #0E0E15;   /* hero gradient end, waveform panel, cart drawer body */
  --shbs-panel:   #13131C;   /* cards, filter controls, license options */
  --shbs-panel2:  #181822;   /* dropdown panels: one step lighter so they read as floating */

  /* --- ink ---------------------------------------------------------------- */
  --shbs-ink:     #F5F3EC;   /* primary text, and the fill of inverted buttons */
  --shbs-mut:     #9A9AA8;   /* secondary text, inactive controls */
  --shbs-faint:   #6A6A78;   /* labels, meta, disabled */

  /* --- accent ------------------------------------------------------------- */
  --shbs-red:     #FF2D2D;   /* CTAs, active states, selection, prices in context */
  --shbs-red2:    #FF6B6B;   /* hover on red CTAs, exclusive-tier column text */

  /* --- lines -------------------------------------------------------------- */
  --shbs-line:    rgba(255, 255, 255, 0.09);   /* standard borders */
  --shbs-line2:   rgba(255, 255, 255, 0.05);   /* interior dividers, table row rules */

  /* --- named literals from the design ------------------------------------- */
  --shbs-icon-disabled:   #3A3A46;
  --shbs-icon-idle-fill:  rgba(255, 255, 255, 0.06);
  --shbs-sel-tint:        rgba(255, 45, 45, 0.09);
  --shbs-sel-tint-strong: rgba(255, 45, 45, 0.14);
  --shbs-header-bg:       rgba(8, 8, 11, 0.92);
  --shbs-player-bg:       rgba(13, 13, 21, 0.96);
  --shbs-scrim:           rgba(4, 4, 6, 0.72);

  /* Red tints, each one a specific state the design distinguishes between. */
  --shbs-red-08:   rgba(255, 45, 45, 0.08);   /* open facet trigger fill, chip fill */
  --shbs-red-10:   rgba(255, 45, 45, 0.10);   /* pack banner */
  --shbs-red-12:   rgba(255, 45, 45, 0.12);   /* active tier button in the cart */
  --shbs-red-03:   rgba(255, 45, 45, 0.03);   /* expanded row fill */
  --shbs-red-05:   rgba(255, 45, 45, 0.05);   /* playing row fill */
  --shbs-red-07:   rgba(255, 45, 45, 0.07);   /* selected license row, beat page */
  --shbs-red-28:   rgba(255, 45, 45, 0.28);   /* playing row bottom border */
  --shbs-red-30:   rgba(255, 45, 45, 0.30);   /* pack banner border */
  --shbs-red-35:   rgba(255, 45, 45, 0.35);   /* expanded row border */
  --shbs-red-40:   rgba(255, 45, 45, 0.40);   /* active filter chip border */
  --shbs-red-45:   rgba(255, 45, 45, 0.45);   /* badge border, play glow */

  --shbs-red-045:  rgba(255, 45, 45, 0.045);  /* picked row in the pack list */
  --shbs-red-06:   rgba(255, 45, 45, 0.06);    /* picked tile in the pack grid */
  --shbs-cover-scrim:   rgba(8, 8, 11, 0.6);   /* check badge over a cover */
  --shbs-play-scrim:    rgba(8, 8, 11, 0.28);  /* beat page play overlay */
  --shbs-play-scrim-h:  rgba(8, 8, 11, 0.5);   /* ... on hover */
  --shbs-play-glow:     rgba(255, 45, 45, 0.45);

  --shbs-line-07:  rgba(255, 255, 255, 0.07);   /* pack progress track */
  --shbs-line-12:  rgba(255, 255, 255, 0.12);   /* hero caret circle border */
  --shbs-line-14:  rgba(255, 255, 255, 0.14);   /* pack toggle border */
  --shbs-line-20:  rgba(255, 255, 255, 0.2);    /* check badge border on a cover */
  --shbs-tile-scrim: rgba(8, 8, 11, 0.94);      /* hero tile caption gradient end */

  /* --- producer studio -------------------------------------------------- */
  --shbs-studio-bg: #0f0f13;                   /* studio page, one step up from the chrome */
  --shbs-avatar-hi: #2a2a36;                   /* avatar radial highlight */
  --shbs-line-03:  rgba(255, 255, 255, 0.03);  /* recessed note panel */
  --shbs-line-04:  rgba(255, 255, 255, 0.04);  /* neutral pill fill */
  --shbs-red-04:   rgba(255, 45, 45, 0.04);    /* danger zone fill */
  --shbs-red-25:   rgba(255, 45, 45, 0.25);    /* in-store warning border */
  --shbs-ok-05:    rgba(57, 197, 127, 0.05);
  --shbs-ok-08:    rgba(57, 197, 127, 0.08);
  --shbs-ok-10:    rgba(57, 197, 127, 0.10);
  --shbs-ok-30:    rgba(57, 197, 127, 0.3);    /* released chip border */
  --shbs-ok-35:    rgba(57, 197, 127, 0.35);
  --shbs-ok-40:    rgba(57, 197, 127, 0.40);
  --shbs-warn-05:  rgba(232, 163, 61, 0.05);
  --shbs-warn-10:  rgba(232, 163, 61, 0.10);
  --shbs-warn-35:  rgba(232, 163, 61, 0.35);
  --shbs-warn-40:  rgba(232, 163, 61, 0.40);

  --shbs-wave-idle: rgba(255, 255, 255, 0.16);  /* bars right of the playhead */
  --shbs-row-alt:   rgba(255, 255, 255, 0.015); /* alternating comparison rows */
  --shbs-drawer-rule: rgba(255, 255, 255, 0.06);

  --shbs-shadow-panel:  0 26px 60px rgba(0, 0, 0, 0.6);   /* dropdown, opens downward */
  --shbs-shadow-up:     0 -22px 60px rgba(0, 0, 0, 0.65); /* popover, opens upward */
  --shbs-shadow-drawer: -40px 0 90px rgba(0, 0, 0, 0.6);

  /* --- fixed heights the design specifies ---------------------------------- */
  --shbs-h-header:  74px;
  --shbs-h-control: 44px;   /* search and every facet trigger */
  --shbs-h-cart-head: 56px;
  --shbs-h-pack-banner: 38px;

  /* --- status, shared with the producer studio ---------------------------- */
  --shbs-ok:      #39C57F;   /* live, granted, settled */
  --shbs-warn:    #E8A33D;   /* pending, held */
  --shbs-idle:    #9A9AA8;   /* draft, inactive */
  --shbs-danger:  #FF2D2D;   /* retired, master-gated, destructive */

  /* --- type --------------------------------------------------------------- */
  /* Archivo is used at width axis 125 ONLY, and always uppercase. */
  --shbs-display: 'Archivo', 'Arial Narrow', Impact, sans-serif;
  --shbs-display-stretch: 125%;   /* Archivo is used EXPANDED everywhere in the design */
  --shbs-body:    'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --shbs-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space Mono tracking scale. The steps are meaningful, not decorative:
     each one marks a different kind of label. */
  --shbs-track-eyebrow: 0.26em;   /* 0.24 - 0.28  "LAUNCH DROP" */
  --shbs-track-label:   0.20em;   /* 0.18 - 0.22  section labels, table headers */
  --shbs-track-ui:      0.14em;   /* 0.12 - 0.16  buttons, meta lines, badges */
  --shbs-track-value:   0.08em;   /* 0.06 - 0.10  running values, search input */

  /* 8.5px is the floor, used only for tertiary meta. Nothing smaller. */
  --shbs-fs-floor: 8.5px;

  /* --- geometry ----------------------------------------------------------- */
  --shbs-max:       1440px;
  --shbs-pad-y:     clamp(22px, 3vw, 40px);
  --shbs-pad-x:     clamp(16px, 3vw, 40px);
  --shbs-gap-col:   clamp(20px, 3vw, 40px);
  --shbs-gap-col-l: clamp(24px, 4vw, 56px);

  --shbs-r-pill:  999px;
  --shbs-r-media: 16px;
  --shbs-r-card:  12px;
  --shbs-r-row:   10px;
  --shbs-r-thumb: 8px;
  --shbs-r-chip:  6px;

  /* --- motion ------------------------------------------------------------- */
  --shbs-t-caret: .2s;
  --shbs-t-color: .3s;
}

/* Selection and scrollbar are part of the design, not browser defaults. */
div.shbs ::selection { background: var(--shbs-red); color: var(--shbs-bg); }
div.shbs ::-webkit-scrollbar { width: 10px; height: 10px; }
div.shbs ::-webkit-scrollbar-track { background: var(--shbs-bg); }
div.shbs ::-webkit-scrollbar-thumb { background: #26262e; border-radius: 8px; }

/* ---------------------------------------------------------------------------
 * Trap guards.
 *
 * Each of these is a real bug from the design review, written once here so no
 * component has to remember it.
 * ------------------------------------------------------------------------- */

/* Trap 1. `all:unset` silently resets box-sizing to content-box, which defeats a global
   border-box rule. A width:100% button with padding then overflows by exactly twice its
   padding. Any reset button must re-declare it. */
div.shbs button,
div.shbs [class*='shbs-'] { box-sizing: border-box; }

/* Trap 4. A single-line label at exact fit tips into wrapping on any font-metric variance,
   even with hundreds of pixels of slack. It recurred four times in review. */
div.shbs .shbs-nowrap { white-space: nowrap; flex-shrink: 0; }

/* Trap 9. overflow-y:auto implies overflow-x:auto. Scroll regions must say otherwise. */
div.shbs .shbs-scroll-y { overflow-y: auto; overflow-x: hidden; }

/* Trap 3. Space Mono has no glyph for the caret characters, so they fall back to a middot.
   Every caret in this design is a CSS border triangle. */
div.shbs .shbs-caret {
  width: 0; height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid currentColor;
  transition: transform var(--shbs-t-caret);
  flex-shrink: 0;
}
div.shbs .shbs-caret[data-open='1'] { transform: rotate(180deg); }

/* --- keyframes named in the handoff --------------------------------------- */
@keyframes shbsEq   { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes shbsPulse{ 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes shbsRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  div.shbs *, div.shbs *::before, div.shbs *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}