/**
 * Gem Mint Vending — shared design tokens ("Holo-Premium Evolution").
 *
 * This file holds ONLY design tokens (CSS custom properties), a CLS-safe
 * font fallback, and the one shared "holo-foil" utility/keyframe — it is
 * NOT a layout/component stylesheet. Every top-level page keeps its own
 * inline <style> block for layout, per this codebase's deliberate
 * per-page convention (see CLAUDE.md, "Page architecture"). Pages just
 * link this file and consume the variables below via var(...).
 *
 * Cache-busting: .htaccess sets a 24h Cache-Control/Expires on CSS, same
 * as assets/nav.js / assets/footer.js — bump the ?v=N query string on
 * every page's <link> whenever this file changes, or edits can take up
 * to a day to reach a returning visitor.
 *
 * Values below are the CANONICAL, majority values already rendered by
 * assets/nav.js, assets/footer.js, and all of shop/ — they resolve a
 * three-way drift that had crept in across the rest of the site:
 *   - index.html alone used a navy-tinted --obsidian (#14181F) explicitly
 *     marked in its own comments as a placeholder pending a final palette.
 *   - about.html, locations/, host-a-machine/, contact/, trade-board/,
 *     community/, and scan/ used --brand/--brand-hot with a more
 *     saturated hot-accent (#7FDCEF) than everywhere else.
 * Both are normalized to the values below.
 *
 * ── WCAG-AA contrast rule (applies everywhere this file is used) ──
 * Solid button backgrounds under white/light text: always --ember-btn at
 * rest, --ember-hover on hover/focus. Never fill a button with --ember or
 * --ember-hot under white text — --ember-hot in particular is a light,
 * near-white color, so a white-text button hovering to --ember-hot reads
 * as an unreadable near-invisible hover state (a real bug found in
 * index.html's and giveaway/index.php's .btn-fire before this file).
 * --ember and --ember-hot are for borders, links, icons, and gradient-
 * text-clip headings — contexts that don't rely on white text sitting on
 * top of the color itself.
 *
 * ── Canonical font-loading <head> snippet (cannot live in this stylesheet —
 * these are HTML tags, not CSS, and there's no shared PHP head include
 * reaching the static .html pages) — copy this exact block into any new
 * page's <head> rather than copying from whatever page happens to be open:
 *
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap" media="print" onload="this.media='all'">
 *   <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap"></noscript>
 *   <link rel="stylesheet" href="/assets/theme.css?v=1">
 */

:root {
  /* ── Neutrals ─────────────────────────────────── */
  --obsidian:   #18181C;
  --deep:       #1E1E23;
  --ash:        #2A2930;
  --ash-light:  #3C3B46;
  --smoke:      #9496A6;
  --frost:      #EFEDE7;
  --white:      #FFFFFF;

  /* ── Brand accent ─────────────────────────────── */
  --ember:       #2A7E91;  /* borders, links, icons, gradient-clip text */
  --ember-hot:   #B9F2FF;  /* light-on-dark text/gradient-clip accent only */
  --ember-btn:   #206475;  /* solid fill under white text (rest state) */
  --ember-hover: #3593A9;  /* solid fill under white text (hover/focus state) */
  --ember-dim:   #123540;  /* low-opacity glows/rings, radial-gradient backgrounds */

  /* ── Semantic ─────────────────────────────────── */
  --success:      #4caf7d;
  --success-btn:  #1f7a3d;
  --success-tint: rgba(76, 175, 125, 0.12);
  --error:        #7a2418;
  --sale:         #E4362B;
  --star:         #e9b33f;

  /* ── Holo-foil signature accent ───────────────────
     A restrained, opt-in animated gradient sweep evoking light catching a
     holo card / a graded slab under a loupe. Applied narrowly via
     .foil-border — see below — never as a global card/button treatment. */
  --foil-gradient: linear-gradient(115deg, var(--ember) 0%, #7FDCEF 22%, var(--ember-hot) 45%, #E8C6F2 62%, var(--star) 80%, var(--ember) 100%);
  --foil-size: 250% 250%;

  /* ── Typography ───────────────────────────────── */
  --display: 'Bebas Neue', 'Bebas Neue Fallback', sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  /* Fluid type scale — consumed via font-size:var(--text-*) inside each
     page's own inline styles. Resolves the old fixed-34-36px (about,
     locations, contact, ...) vs fluid clamp() (host-a-machine, giveaway)
     split without introducing a class framework. */
  --text-hero:    clamp(3rem, 8vw, 6rem);
  --text-h1:      clamp(2rem, 5vw, 2.5rem);
  --text-h2:      clamp(1.15rem, 3vw, 1.35rem);
  --text-eyebrow: 0.68rem;
}

/* ── CLS-safe Bebas Neue fallback ──────────────────
   Bebas Neue is a very condensed display font — a generic sans-serif
   fallback renders roughly 70% WIDER at the same font-size, which causes
   a visible reflow when the real font swaps in after first paint (the
   <link ... media="print" onload> trick above loads it non-blocking).
   This gives the fallback its own family name with size-adjust scaled to
   Bebas Neue's actual measured width (verified: "WIN FREE FILES EVERY
   MONTH" at 60px renders 536.6px in Bebas Neue vs 931.3px in Arial —
   ratio 0.576), so the swap barely moves the layout. */
@font-face {
  font-family: 'Bebas Neue Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial');
  font-weight: 400;
  size-adjust: 57.6%;
  ascent-override: 100%;
  descent-override: 20%;
}

/* ── Holo-foil utility ─────────────────────────────
   Opt-in glow-frame treatment: a teal→cyan→ice-blue→violet→gold sweep
   that appears only on hover/focus (never auto-looping) and respects
   prefers-reduced-motion. Intended for a handful of high-value touch
   points (hero CTAs, featured cards) — not every button or card.

   Implemented as a ::before frame sitting just behind the element (not
   as the element's own `background`) so it never has to fight a host
   component's own background/color rules for cascade priority — it works
   underneath whatever the element already looks like. Add `position:
   relative` to the host element yourself if it doesn't already have a
   positioning context (most cards/buttons in this codebase are static). */
@keyframes gmv-foil-sheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.foil-border {
  position: relative;
  z-index: 0;
}
.foil-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: var(--foil-gradient);
  background-size: var(--foil-size);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.foil-border:hover::before,
.foil-border:focus-within::before {
  opacity: 1;
  animation: gmv-foil-sheen 2.4s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .foil-border:hover::before,
  .foil-border:focus-within::before {
    animation: none;
  }
}
