/* ==========================================================================
   PlanetDJ prototype — theme layer
   Single source of truth for color. Loaded BEFORE each page's inline <style>
   so page-specific rules still win on equal specificity.

   Every foreground/background pair below is verified >= WCAG AA 4.5:1
   against the darkest surface in its own theme. Do not hand-tune these
   values; re-run scripts/contrast-audit.py after any change.
   ========================================================================== */

:root{
  /* ---- surfaces ---- */
  --bg:#0A0D14; --bg-2:#0E1220; --card:#121722; --card-2:#151B29; --well:#0C111C;

  /* ---- text ramp (16.6 / 11.3 / 7.5 / 5.2 on --card-2) ---- */
  --ink:#E9EDF4; --ink-2:#BEC6D2; --ink-3:#98A1AF; --ink-4:#79849B;

  /* ---- hairlines ---- */
  --line:rgba(148,171,205,.13); --line-2:rgba(148,171,205,.22); --line-3:rgba(148,171,205,.07);

  /* ---- accents ---- */
  --blue:#4086D7; --blue-deep:#1F6FC4; --blue-ink:#8FBBEE;
  --blue-wash:rgba(59,130,214,.10); --blue-line:rgba(59,130,214,.42);
  --gold:#C9A961; --gold-dim:rgba(201,169,97,.55);
  --gold-wash:rgba(201,169,97,.09); --gold-line:rgba(201,169,97,.30);

  /* ---- channel tokens ----------------------------------------------------
     The page CSS carries ~200 alpha variants of nine base colors. Rewriting
     them as rgba(var(--rgb-x), A) keeps every alpha value exactly as designed
     while letting the base flip with the theme. Do not inline a raw rgb()
     triple in page CSS again; add a channel here instead.
     ---------------------------------------------------------------------- */
  --rgb-neutral:148,171,205;   /* slate tints: hairlines, hover washes */
  --rgb-blue:59,130,214;       /* brand blue washes */
  --rgb-blue-deep:31,111,196;
  --rgb-gold:201,169,97;
  --rgb-ink:233,237,244;       /* halos struck from the text color */
  --rgb-deep:10,13,20;         /* sticky header + overlay panels */
  --rgb-deep2:14,18,32;
  --rgb-scrim:6,8,13;
  --rgb-shadow:0,0,0;
  --rgb-glow:120,150,190;
  --rgb-white:255,255,255;     /* stays white in both themes: button hairlines */

  /* ---- semantic roles extracted from literal colors ---- */
  --on-accent:#fff;                       /* label on a filled blue/gold button */
  --hdr-bg:rgba(10,13,20,.78);            /* sticky header, sits over content */
  --scrim:rgba(6,8,13,.72);               /* modal / drawer backdrop */
  --hover-tint:rgba(148,171,205,.05);     /* hover wash on quiet controls */
  --hover-tint-2:rgba(148,171,205,.075);
  --btn-hairline:rgba(255,255,255,.09);   /* inner edge on a filled button */
  --surface-tint:rgba(148,171,205,.028);  /* barely-there panel fill */
  --surface-tint-2:rgba(148,171,205,.022);
  --surface-tint-3:rgba(148,171,205,.035);
  --halo:rgba(233,237,244,.07);           /* pulse ring behind the live dot */
  --halo-2:rgba(233,237,244,.09);
  --dot:#79849B;                          /* decorative separators, non-text */
  --star-on:#C8D3E6; --star-off:#28324A;  /* rating gradient stops */
  --glow-1:rgba(120,150,190,.055);        /* body ambient gradients */
  --glow-2:rgba(31,111,196,.05);
  --sel-bg:rgba(59,130,214,.34);
  --shadow:0 26px 56px -30px rgba(0,0,0,.85);
  --shadow-heavy:rgba(0,0,0,.9);
  --track:rgba(148,171,205,.16);          /* slider / meter track */
  --track-2:rgba(148,171,205,.34);
  --spark-line:#4086D7;                   /* price-spread sparkline stroke */
  --spark-fill-a:rgba(59,130,214,.22);
  --spark-fill-b:rgba(59,130,214,0);
  --ok:#4ADE80; --warn:#FBBF24;

  /* ---- type ---- */
  --r:16px;
  --fd:'Space Grotesk',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs:'Newsreader',Georgia,'Times New Roman',serif;

  color-scheme:dark;
}

/* ==========================================================================
   LIGHT — closer to the store PlanetDJ runs today (white, brand blue).
   Same token names, so no component CSS changes between themes.
   ========================================================================== */
:root[data-theme="light"]{
  --bg:#F6F8FC; --bg-2:#FFFFFF; --card:#FFFFFF; --card-2:#EFF3F9; --well:#E8EDF5;

  /* 16.6 / 10.0 / 6.7 / 4.9 on --well, the darkest light surface */
  --ink:#0D1420; --ink-2:#303C4F; --ink-3:#455671; --ink-4:#566B8D;

  --line:rgba(19,38,74,.14); --line-2:rgba(19,38,74,.24); --line-3:rgba(19,38,74,.08);

  /* Channel flips. Neutral tints become navy-on-white; the dark surface
     channels become white so every scrim and sticky header inverts cleanly. */
  --rgb-neutral:19,38,74;
  --rgb-blue:39,107,186;
  --rgb-blue-deep:31,111,196;
  --rgb-gold:129,103,44;
  --rgb-ink:13,20,32;
  --rgb-deep:255,255,255;
  --rgb-deep2:248,250,253;
  --rgb-scrim:18,28,48;
  --rgb-shadow:18,32,60;
  --rgb-glow:120,150,190;
  --rgb-white:255,255,255;

  --blue:#276BBA; --blue-deep:#1F6FC4; --blue-ink:#16508C;
  --blue-wash:rgba(39,107,186,.07); --blue-line:rgba(39,107,186,.34);
  --gold:#81672C; --gold-dim:rgba(129,103,44,.62);
  --gold-wash:rgba(129,103,44,.08); --gold-line:rgba(129,103,44,.28);

  --on-accent:#fff;
  --hdr-bg:rgba(255,255,255,.82);
  --scrim:rgba(18,28,48,.42);
  --hover-tint:rgba(19,38,74,.045);
  --hover-tint-2:rgba(19,38,74,.07);
  --btn-hairline:rgba(255,255,255,.22);
  --surface-tint:rgba(19,38,74,.026);
  --surface-tint-2:rgba(19,38,74,.02);
  --surface-tint-3:rgba(19,38,74,.034);
  --halo:rgba(19,38,74,.10);
  --halo-2:rgba(19,38,74,.13);
  --dot:#8895AC;
  --star-on:#B8860B; --star-off:#C9D3E2;
  --glow-1:rgba(120,150,190,.10);
  --glow-2:rgba(31,111,196,.07);
  --sel-bg:rgba(39,107,186,.22);
  --shadow:0 20px 44px -28px rgba(18,32,60,.28);
  --shadow-heavy:rgba(18,32,60,.26);
  --track:rgba(19,38,74,.14);
  --track-2:rgba(19,38,74,.30);
  --spark-line:#276BBA;
  --spark-fill-a:rgba(39,107,186,.16);
  --spark-fill-b:rgba(39,107,186,0);
  --ok:#15803D; --warn:#A16207;

  color-scheme:light;
}

/* Theme swap should feel deliberate, not flash. Colors only, never layout. */
:root.theme-anim,
:root.theme-anim body,
:root.theme-anim .site,
:root.theme-anim .card,
:root.theme-anim .promo,
:root.theme-anim .util,
:root.theme-anim .sfoot{
  transition:background-color .28s ease, color .28s ease, border-color .28s ease;
}

/* ==========================================================================
   Theme toggle control
   ========================================================================== */
.theme-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border-radius:10px;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  cursor:pointer;transition:color .16s,border-color .16s,background-color .16s;
}
.theme-btn:hover{color:var(--ink);border-color:var(--line-2);background:var(--hover-tint)}
.theme-btn svg{position:absolute;width:17px;height:17px;transition:opacity .22s,transform .32s cubic-bezier(.2,.7,.3,1)}
.theme-btn .i-sun{opacity:0;transform:rotate(-70deg) scale(.6)}
.theme-btn .i-moon{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .theme-btn .i-sun{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .theme-btn .i-moon{opacity:0;transform:rotate(70deg) scale(.6)}

/* ==========================================================================
   Accessibility floors that apply on every page
   ========================================================================== */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.theme-btn:focus-visible,.icobtn:focus-visible{outline-offset:3px}

/* Every interactive control clears a 44px touch target at phone widths.
   Keyed to viewport, not only pointer:coarse, so it holds in a desktop
   browser narrowed to phone size and in automated QA contexts. */
@media (pointer:coarse), (max-width:620px){
  button,select,[role="button"],[role="tab"],
  .icobtn,.theme-btn,.chip,.sbtn,.atc,.wish,.pdj-x{
    min-height:44px;
  }
  .icobtn,.theme-btn,.pdj-x{min-width:44px}
  .sfoot a,.mnav a,.mnav-links a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* Links inside running prose keep their natural inline box. */
  p a[href],li a[href],.prose a[href],.notecap a[href],
  .panel p a[href],.aside p a[href]{min-height:0;display:inline}
}

/* The quantity stepper stays compact but still clears the target on touch. */
@media (pointer:coarse){
  .pdj-qty button{min-width:44px;min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue-deep);color:var(--on-accent);padding:12px 18px;border-radius:0 0 8px 0;
  font-family:var(--fd);font-size:13px;font-weight:600;
}
.skip-link:focus{left:0}