/*
  Charlie's Pack Pulls — brand tokens (v1.0, Sep 24 2026)
  Theme: Classic Fire colors + Luckiest Guy lettering + Comic Dots background.
  Source of truth for any web page, app screen, overlay or thumbnail tool.
  Guide: businesses/charlies_pack_pulls_brand_kit.md

  Fonts (Google Fonts):
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Rubik:wght@400;500;700;900&display=swap">
*/
:root {
  /* ---- color ---- */
  --cpp-ember:   #E63946;  /* main red: backgrounds, primary surfaces */
  --cpp-blaze:   #FF7B00;  /* orange: glow, secondary accent */
  --cpp-spark:   #FFB703;  /* gold: highlight word, badges text, prices */
  --cpp-char:    #1D1A1F;  /* charcoal: outlines, badges, dark surfaces */
  --cpp-cream:   #FFF3E0;  /* cream: lettering fill, sticker outline, light surfaces */
  --cpp-dot:     rgb(29 26 31 / .16);  /* halftone dot color */

  /* semantic */
  --cpp-bg:          var(--cpp-ember);
  --cpp-text-on-red: var(--cpp-cream);
  --cpp-highlight:   var(--cpp-spark);
  --cpp-outline:     var(--cpp-char);

  /* ---- type ---- */
  --cpp-font-display: "Luckiest Guy", "Arial Black", cursive;       /* logo, thumbnail + Shorts headlines */
  --cpp-font-ui:      "Rubik", system-ui, sans-serif;               /* badges, tags, labels, body */
  --cpp-display-tracking: .02em;
  --cpp-display-leading:  .92;
  --cpp-tag-tracking:     .2em;   /* uppercase Rubik 900 taglines */

  /* ---- effects ---- */
  --cpp-stroke: .05em;             /* -webkit-text-stroke on display text, in --cpp-char */
  --cpp-drop:   0 .07em 0 var(--cpp-char);  /* hard drop under display text */
  --cpp-radius-card: 7% / 5%;      /* trading-card corners */
  --cpp-radius-pill: 999px;

  /* ---- Comic Dots background ---- */
  --cpp-dot-size: 16px;            /* spacing; scale with the canvas (16px at 800-1280, 22px at 2560) */
  --cpp-comic-dots:
    radial-gradient(circle, var(--cpp-dot) calc(var(--cpp-dot-size) * .11), transparent calc(var(--cpp-dot-size) * .15)) 0 0 / var(--cpp-dot-size) var(--cpp-dot-size),
    radial-gradient(ellipse at 50% 130%, var(--cpp-spark) 0%, var(--cpp-blaze) 22%, transparent 58%),
    var(--cpp-ember);
}

/* ---- ready-made classes ---- */
/* Written out (not var(--cpp-comic-dots)) so --cpp-dot-size set on the element itself takes effect. */
.cpp-bg { background:
  radial-gradient(circle, var(--cpp-dot) calc(var(--cpp-dot-size) * .11), transparent calc(var(--cpp-dot-size) * .15)) 0 0 / var(--cpp-dot-size) var(--cpp-dot-size),
  radial-gradient(ellipse at 50% 130%, var(--cpp-spark) 0%, var(--cpp-blaze) 22%, transparent 58%),
  var(--cpp-ember); }

.cpp-display {
  font-family: var(--cpp-font-display);
  color: var(--cpp-cream);
  letter-spacing: var(--cpp-display-tracking);
  line-height: var(--cpp-display-leading);
  -webkit-text-stroke: var(--cpp-stroke) var(--cpp-char);
  paint-order: stroke fill;
  text-shadow: var(--cpp-drop);
}
.cpp-display em, .cpp-display .hot { font-style: normal; color: var(--cpp-spark); }

.cpp-tag {
  font: 900 1rem/1 var(--cpp-font-ui);
  letter-spacing: var(--cpp-tag-tracking);
  text-transform: uppercase;
  color: var(--cpp-cream);
}

.cpp-badge {
  display: inline-block;
  background: var(--cpp-char);
  color: var(--cpp-spark);
  font: 900 .9rem/1 var(--cpp-font-ui);
  text-transform: uppercase;
  padding: .45em .9em;
  border-radius: var(--cpp-radius-pill);
}

/* Cream-then-charcoal "sticker" outline around a cut-out photo of Charlie.
   Set --cpp-sticker to ~0.6% of the image's rendered width (e.g. 5px at 800px). */
.cpp-sticker {
  --cpp-sticker: 5px;
  filter:
    drop-shadow(var(--cpp-sticker) 0 0 var(--cpp-cream)) drop-shadow(calc(var(--cpp-sticker) * -1) 0 0 var(--cpp-cream))
    drop-shadow(0 var(--cpp-sticker) 0 var(--cpp-cream)) drop-shadow(0 calc(var(--cpp-sticker) * -1) 0 var(--cpp-cream))
    drop-shadow(calc(var(--cpp-sticker) * .8) 0 0 var(--cpp-char)) drop-shadow(calc(var(--cpp-sticker) * -.8) 0 0 var(--cpp-char))
    drop-shadow(0 calc(var(--cpp-sticker) * .8) 0 var(--cpp-char)) drop-shadow(0 calc(var(--cpp-sticker) * -.8) 0 var(--cpp-char));
}