/* sx-skin.css — StreamPals' cream world, handed to the SHARED chrome.
 * SP_SX_SKIN_VERSION 1.3.1  (1.3.1: Live + account chips go quiet ink-tint, no more white pills)
 *
 * WHY THIS FILE EXISTS. The family header, footer and Store panel are shared code served
 * by strmrx.com's layout tag. They are built to borrow the app's palette: every colour in
 * them is a `--sx-*` token, and the contract (strmrx-core/web/core.css) says each app maps
 * its own brand vars onto those tokens in its own `:root` skin.
 *
 * ⚠️ STREAMPALS NEVER DID, AND IT WAS NOT NEUTRAL — IT WAS WRONG, LOUDLY. Every page here
 * loads the frozen `core/v1/core.css`, which ACTIVELY declares the family's dark defaults
 * (`--sx-bg:#0a0a0c`, `--sx-text:#e9e3e6`, and so on). So the shared chrome was not falling
 * back to nothing; it was faithfully rendering somebody else's palette. The Store panel
 * landed as a near-black box in the middle of a cream page, and the obvious reading of that
 * — "the shared component has the wrong look, restyle it" — is exactly backwards. The
 * component was right. Nobody had told it where it was standing.
 *
 * ⚠️ THE MAP IS ON `body`, NOT ON `:root`, AND THAT IS THE WHOLE DARK-MODE STORY. A custom
 * property is substituted at COMPUTED-VALUE time on the element that declares it. Declared
 * on `:root`, `--sx-bg: var(--cream)` resolves against the `:root` copy of `--cream` — the
 * light one — and every descendant then inherits that already-resolved colour. StreamPals
 * flips to dark by redeclaring `--cream` and friends on `body.dark-mode`, one level down,
 * where a `:root` map can never see it. Declared here on `body`, the same line resolves
 * against whichever `--cream` won on `body` — so dark mode carries the shared chrome with
 * it, for free, with no second block to keep in step. Moving this to `:root` will look
 * like it works, because light mode is the mode you are testing in.
 *
 * ⚠️ IT MUST LOAD AFTER core.css. Same-specificity wins go to the last one declared, and
 * core.css v1 is declaring the dark set. Every page linking this file links it below the
 * core.css line.
 *
 * ⚠️ THIS FILE SETS ONLY THE CONTRACT TOKENS. It is not a place for StreamPals' own styling
 * — that is style.css and the page's own <style>. Anything added here reaches the shared
 * header, footer and Store on every page, which is a wide blast radius for a local tweak.
 *
 * The `var(--x, literal)` fallbacks are the cream values verbatim, so a page that somehow
 * loads this without the palette still renders StreamPals rather than half of it.
 */

body {
  /* ── Surfaces. The panel sits ON the page, so surface2 is the card colour and
        surface is the quieter fill inside it (chips, hover states, the close button). */
  --sx-bg:        var(--cream, #FDF6EC);
  --sx-surface:   var(--cream-dark, #F5EAD8);
  --sx-surface2:  var(--card, #FFFAF4);

  /* ── Lines.
        ⚠️ NOT `--cream-dark`, obvious as that looks. The shared panel fills its tiles with
        `--sx-surface` and outlines them with `--sx-border`; set both to cream-dark and the
        outline is the same colour as the thing it outlines, so every tile edge disappears
        and the shelf reads as one flat block. It has to be a tint of the INK instead.
        Mixed rather than hard-coded so dark mode inverts it for free: `--text` is dark
        brown on cream and pale on navy, giving a dark hairline on light and a light
        hairline on dark, from one line. */
  --sx-border:    color-mix(in srgb, var(--text, #3D2B1F) 14%, transparent);
  --sx-border2:   color-mix(in srgb, var(--text, #3D2B1F) 26%, transparent);

  /* ── Type. Three weights of readability, exactly as the cream world already grades
        them: full strength, soft, and the muted tone used for counts and captions. */
  --sx-text:      var(--text, #3D2B1F);
  --sx-muted:     var(--text-soft, #7A5C4A);
  --sx-muted2:    var(--text-soft, #7A5C4A);
  --sx-faint:     var(--text-muted, #B09080);

  /* ── The accent, and what sits on top of it.
        ⚠️ `--sx-accent-ink` is NOT decorative. The shared buttons paint their label in it
        over `--sx-accent`, and the family default is a near-black meant for a bright
        accent. Sage is a mid-tone: black-on-sage is muddy and unreadable at 13px, which
        is exactly the failure a token nobody sets produces silently. White is the pairing
        StreamPals' own primary button already uses (.sps-btn-primary), so this keeps one
        answer for one question. */
  --sx-accent:       var(--sage, #7DB899);
  --sx-accent2:      var(--butter, #F5C842);
  --sx-accent-ink:   #ffffff;
  --sx-accent-hover: var(--sage-dark, #5A9978);
  --sx-accent-soft:  var(--sage-light, #A8D4BC);

  /* ── Status. Sage already means "yes, you have this" everywhere in the shop, so the
        Store panel's owned tick reads as the same idea rather than as a new one. */
  --sx-ok:        var(--sage-dark, #5A9978);
  --sx-danger:    #C4553D;

  /* ── Shape. Cream is a rounded world; the family default is squarer. */
  --sx-radius:    var(--radius, 20px);
  --sx-radius-sm: var(--radius-sm, 12px);
  --sx-shadow:    var(--shadow-hover, 0 8px 32px rgba(92, 61, 46, 0.14));

  /* ── Type family. The shared components set `font: inherit` on almost everything, so
        this is mostly belt-and-braces for the few places the contract names a font. */
  --sx-font: 'Nunito', system-ui, -apple-system, sans-serif;
}

/* ═══ THE HEADER WEARS THE PAGE'S OWN SURFACE (Joey, 2026-08-20, take two) ═══════════
 *
 * Take one was the old brown .site-header bar verbatim. Joey's verdict on seeing it in
 * place: too contrasty against the cream page in light mode, muddy against the plum in
 * dark mode. The header should sit IN the world, not on top of it.
 *
 * So the bar borrows the page's CARD surface (the same colour every content box wears)
 * and the warm ink text the page already reads in. Because these resolve from the app's
 * own vars, not literals, dark mode carries the header for free: on body.dark-mode the
 * card var flips and the bar flips with it. The wordmark is the soft green (Joey's
 * pick), the X signature and badges stay butter.
 *
 * ⚠️ !important is LOAD-BEARING: the layout config's colors arrive as INLINE styles on
 * .sxh (applyColors in the chrome) and only !important outranks inline.
 * ⚠️ Scope everything to .sxh; a body-level change reaches the Store panel and footer.
 * ⚠️ Var name chains: the dashboard palette says --card/--cream-dark; the shop page
 * says --card-bg/--cream-dk. Both are chained so every page resolves its own world.
 */
.sxh {
  /* Joey's take-three notes: card white was too bright a bar in light mode, so the bar
     deepens one step to the EGGSHELL chip tone (--cream-dark) and the hover pill flips
     to card white on top of it. Nav ink is not a judgement call any more: it is the
     SAME pair the dashboard's own tab row uses (--text-muted resting, ink on hover),
     so the header always matches the row under it in both modes. */
  --sx-bg:        var(--cream-dark, var(--cream-dk, #F5EAD8)) !important;
  --sx-surface:   var(--cream-dark, var(--cream-dk, #F5EAD8)) !important; /* bar = eggshell */
  /* Hover pills, the Live chip and similar fills all draw --sx-surface2. Card white here
     made them read as stark white blobs on the eggshell bar (Joey's note), so it is a
     quiet tint OF THE INK instead: warm on cream, light on navy, from one line. */
  --sx-surface2:  color-mix(in srgb, var(--text, #3D2B1F) 7%, transparent) !important;
  --sx-head-fill: 94% !important;              /* a whisper of glass over the page */
  --sx-text:      var(--text, #3D2B1F) !important;
  --sx-muted:     var(--text-muted, #B09080) !important; /* = .tab-nav-btn resting ink */
  --sx-muted2:    var(--text-muted, #B09080) !important;
  --sx-faint:     var(--text-muted, #B09080) !important;
  --sx-border:    color-mix(in srgb, var(--text, #3D2B1F) 14%, transparent) !important;
  --sx-border2:   color-mix(in srgb, var(--text, #3D2B1F) 26%, transparent) !important;
  --sx-accent:    var(--butter, #F5C842) !important; /* the X signature + badges */
  --sx-accent-ink:#3D2800 !important;
  /* The marketing layout config paints a whole INLINE theme on this element, including a
     literal `color:` (stark near-white). Tokens above outrank the inline tokens, but the
     plain color needs its own !important or every item that merely INHERITS goes white. */
  color: var(--text, #3D2B1F) !important;
}

/* The wordmark: Fredoka One in the soft green, like the app's friendliest buttons. */
.sxh .sxh-brand-txt { font-family: 'Fredoka One', 'Nunito', cursive; letter-spacing: .2px; }
.sxh .sxh-word { color: var(--sage, #7DB899); }

/* Nav reads in warm ink: the SAME pair as the dashboard's tab row (--text-muted resting,
   full ink on hover). Declared explicitly because the marketing shell's items carry no
   colour of their own and would otherwise inherit the inline near-white above. */
.sxh .sxh-item { font-weight: 800; color: var(--text-muted, #B09080); }
.sxh .sxh-item:hover, .sxh .sxh-item.on { color: var(--text, #3D2B1F); }

/* The account chip's own greys are white-alpha meant for dark bars; give it the same
   cream-dark fill and ink hairline the page's chips wear. */
.sxh .sxa-chip {
  background: color-mix(in srgb, var(--text, #3D2B1F) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text, #3D2B1F) 12%, transparent);
  color: var(--text-soft, #7A5C4A);
}
.sxh .sxa-chip:hover { background: color-mix(in srgb, var(--text, #3D2B1F) 11%, transparent); }

/* ── Per-item icon art (family bones, StreamPals rendering) ──────────────────────────
   Same item, same meaning fleet-wide; ours wears the app's own cozy icon set. The
   stroke glyph is hidden and the art painted in its place, so a chrome update that
   re-renders the glyph changes nothing visible. Store has art today; Dashboard (paws),
   Friends and Bell keep the ink-tinted stroke glyphs until Joey supplies matching
   icons; add them here the same way when they land. */
.sxh #navStore .sxh-ico-g, .sxh #navStore .sxh-ico { display: none; }
.sxh #navStore::before {
  content: ""; flex: none; width: 26px; height: 26px;
  background: url('/assets/icons/tab-store.png') center/contain no-repeat;
}