/* ═══ SFTi — THE COLOUR DECK. One vocabulary, one registry, every surface. ═══════════

   THE STOREFRONT IS THE REFERENCE (operator, three times): shop's palette is what index/
   and system/ wear, not the other way round. The NAMES below are the app's — sixteen CSS
   cards already speak them and renaming would break every one — and the VALUES are shop's.
   That is the whole trick: one registry, so "shop's colours are the app's colours" is true
   by construction rather than by three files agreeing.

   Shop's eight declared colours are the source. Everything else here is DERIVED from them
   in the same family (the card borders are shop's card border, the glows are shop's own
   red and gold), because a half-converted deck reads as a bug.

   Cyan survives because SHOP DECLARES IT — it is the storefront's status colour (the
   "where the system is today" strip, the tier badge), not a leftover of the old app theme.

   Tokens shop has no opinion about — the outcome palette, the greens/violet/orange, the
   typography, spacing, safe-areas and nav reserves — are NOT here. They stay in
   app/system/css/tokens.css, which imports this file and adds them. */

:root {
  /* the PWA and the public pages are DARK-ONLY regardless of the OS appearance — iOS
     defaults to light and would otherwise paint its own form controls, scrollbars and
     root canvas white. */
  color-scheme: dark;

  /* ── canvas ── shop's --bg-primary. The manifest's background_color is already this. */
  --bg-void:            #0a0a0f;

  /* ── glass ── shop's card is a #1a1a26 → #12121a wash on a near-black page, its header
     a #0a0a0f slab, its card border red and its featured border gold. */
  --glass-bg:           rgba(22, 22, 32, 0.72);
  --glass-bg-heavy:     rgba(10, 10, 15, 0.92);
  --glass-border:       rgba(230, 57, 70, 0.15);
  --glass-border-active: rgba(212, 175, 55, 0.55);
  --glass-shine:        rgba(255, 255, 255, 0.08);
  --glass-blur:         30px;

  /* ── accents ── shop's four, verbatim */
  --accent-red:         #e63946;
  --accent-red-bright:  #ff6b78;
  --accent-gold:        #d4af37;
  --accent-silver:      #c0c0c0;
  --accent-cyan:        #00e5ff;
  --accent-cyan-bright: #6cf8ff;

  /* ── text ── shop's two, plus the dim/panel inks derived off --text-secondary */
  --text-primary:       #e8e8f0;
  --text-secondary:     #9a9aaa;
  --text-dim:           rgba(154, 154, 170, 0.75);
  --ink-panel:          #d8d8e4;

  /* ── glows ── shop's own: red on the section spine, gold on the featured tier */
  --glow-cyan:          0 0 20px rgba(0, 229, 255, 0.30);
  --glow-red:           0 0 15px rgba(230, 57, 70, 0.35);
  --glow-gold:          0 0 20px rgba(212, 175, 55, 0.35);
}