/* ============================================================
   AtlantaTCG — Brand Design Tokens
   Derived from the shop emblem logo (silver "ATLANTA TCG" wordmark
   on warm brown, with amethyst-purple, coin-gold, card-blue & black).
   Source: /7.27.2025_6885a2c494f833.53212426.jpeg
   Import this file, then build with the var() tokens below.
   ============================================================ */
:root{
  /* ---- Core brand palette ---- */
  --brand-purple:      #6E3FA3;  /* amethyst die — primary brand accent */
  --brand-purple-deep: #4A2A73;
  --brand-purple-tint: #B79AD6;
  --brand-gold:        #E0A526;  /* coin gold — primary CTA / highlight */
  --brand-gold-deep:   #B9831A;
  --brand-gold-tint:   #F2D38A;
  --brand-yellow:      #FFC400;  /* vivid flat yellow — wordmark "TCG" */
  --brand-blue:        #3A6BB0;  /* card blue — secondary accent */
  --brand-blue-deep:   #27518C;
  --brand-brown:       #5A3E22;  /* emblem ground — warm structure */
  --brand-brown-deep:  #3A2817;
  --brand-brown-tint:  #8A6A3E;
  --brand-black:       #14110C;  /* warm near-black — ink, keylines */
  --brand-silver:      #C9CDD2;  /* chrome wordmark light */
  --brand-silver-deep: #8C9298;  /* chrome wordmark shade */

  /* ---- Vibrant logo accents (the card fan + gems) — use as POPS, not structure ---- */
  --brand-red:         #CE3B2B;  /* card red — HOT / sale / energy pop */
  --brand-red-deep:    #9B3A2E;
  --brand-green:       #57A347;  /* creature green — NEW / fresh / fun pop */
  --brand-green-deep:  #2E7D52;
  --brand-amethyst:    #9B6FC8;  /* bright amethyst gem — vivid purple pop */

  /* ---- Surfaces ---- */
  --cream:         #FBF5E9;  /* default light page surface */
  --parchment:     #F4EAD6;  /* warm panel surface */
  --parchment-deep:#E7D7B8;  /* hairlines / muted fills */
  --ink:           var(--brand-black);
  --paper:         var(--cream);

  /* ---- Semantic roles ---- */
  --cta:        var(--brand-gold);        --cta-ink: var(--brand-black);
  --accent:     var(--brand-purple);
  --link:       var(--brand-blue);
  --price:      var(--brand-purple-deep);
  --in-stock:   #2E7D52;   /* muted leaf green — the ONLY green, semantic */
  --low-stock:  var(--brand-gold-deep);
  --sold-out:   #9B3A2E;

  /* ---- Typography ---- */
  --font-display: 'Bungee', 'Bungee Fallback', system-ui, sans-serif;     /* emblem-energy headlines */
  --font-marker:  'Permanent Marker', cursive;          /* handwritten accents */
  --font-body:    'Rubik', 'Rubik Fallback', system-ui, sans-serif;       /* body / UI */
  /* The wordmark uses a silver chrome gradient: --brand-silver -> --brand-silver-deep */

  /* ---- Form (sticker system) ---- */
  --die:7px;        /* white die-cut sticker border */
  --keyline:3px;    /* black cel keyline */
  --r-card:16px;
  --shadow-hard:0 9px 0 rgba(20,17,12,.18), 0 16px 30px rgba(20,17,12,.28);

  /* ---- Spacing scale ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --maxw:1200px;
}

/* ==== Metric-adjusted local fallbacks (CLS guard) ====
   Same box as the webfonts, so the font-display:swap moment can't shift
   layout (Lighthouse flagged CLS 0.33 on the hero from exactly this).
   size-adjust values were tuned on the live pages until fonts-blocked and
   fonts-loaded geometry matched pixel-for-pixel at 390px and 412px
   (scratchpad tune-fallbacks, 2026-07-10) — re-tune if a font family, hero
   copy, or section-title letter-spacing changes. Rubik gets a second face
   for bold weights: real Rubik bold is ~8% wider than the synthetic bold
   Chrome fakes from local Arial. Downloads nothing; restyles local Arial. */
@font-face {
  font-family: 'Bungee Fallback';
  src: local('Arial');
  size-adjust: 121%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Ranchers Fallback';
  src: local('Arial');
  size-adjust: 77%;
  ascent-override: 104%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Rubik Fallback';
  src: local('Arial');
  font-weight: 100 500;
  size-adjust: 105%;
  ascent-override: 93%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Rubik Fallback';
  src: local('Arial');
  font-weight: 501 900;
  size-adjust: 113%;
  ascent-override: 93%;
  descent-override: 25%;
  line-gap-override: 0%;
}