/*
  Tristan's Pack Attack — brand tokens (v1.0, Oct 9 2026)
  Theme: Kelly colors + Bowlby One lettering + Card Rain background.
  Source of truth for any web page, app screen, overlay or thumbnail tool.
  Guide: brand/BRAND-GUIDE.md

  Fonts (Google Fonts; the .ttf files are in brand/fonts/):
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bowlby+One&family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;700&display=swap">
*/
:root {
  /* ---- color ---- */
  --tpa-kelly:    #2E9E4F;  /* main green: backgrounds, primary surfaces */
  --tpa-seafoam:    #5EE39B;  /* seafoam: glow, secondary accent */
  --tpa-gold:    #FFD93D;  /* gold: highlight word, badge text, prices */
  --tpa-pine:  #0B2E1C;  /* pine: outlines, badges, dark surfaces */
  --tpa-milk:    #F4FBF0;  /* milk: lettering fill, sticker outline, light surfaces */
  --tpa-pattern: rgb(11 46 28 / .16);  /* the color of the cards in Card Rain (also baked into the pattern below) */

  /* semantic */
  --tpa-bg:           var(--tpa-kelly);
  --tpa-text-on-green: var(--tpa-milk);
  --tpa-highlight:    var(--tpa-gold);
  --tpa-outline:      var(--tpa-pine);

  /* ---- type ---- */
  --tpa-font-display: "Bowlby One", "Arial Black", sans-serif;         /* logo, thumbnail + Shorts headlines */
  --tpa-font-ui:      "Barlow Condensed", "Arial Narrow", sans-serif;  /* badges, tags, labels (800, caps) */
  --tpa-font-body:    "Barlow", system-ui, sans-serif;                 /* body text on web pages */
  --tpa-display-tracking: .015em;
  --tpa-display-leading:  .94;
  --tpa-tag-tracking:     .12em;  /* uppercase Barlow Condensed 800 taglines */

  /* ---- effects ---- */
  --tpa-stroke: .13em;             /* -webkit-text-stroke on display text, in --tpa-pine (half of it shows outside the letter) */
  --tpa-drop:   .07em .07em 0 var(--tpa-pine);  /* hard drop, down and to the right of display text */
  --tpa-tilt:   -4deg;             /* headlines and the wordmark lean up to the right */
  --tpa-radius-card: 7% / 5%;      /* trading-card corners */
  --tpa-radius-pill: 999px;

  /* ---- Card Rain background ---- */
  --tpa-tile: 192px;               /* one pattern tile (two cards); 15% of the canvas width: 192px at 1280, 288px at 1920, 384px at 2560 */
  --tpa-cards: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%230B2E1C' fill-opacity='.16'%3E%3Crect x='8' y='5' width='16' height='22' rx='2.5' transform='rotate(-14 16 16)'/%3E%3Crect x='37' y='33' width='16' height='22' rx='2.5' transform='rotate(18 45 44)'/%3E%3C/g%3E%3C/svg%3E");
  --tpa-card-rain:
    var(--tpa-cards) 0 0 / var(--tpa-tile) var(--tpa-tile),
    radial-gradient(ellipse 75% 85% at 50% 112%, var(--tpa-seafoam), transparent 70%),
    var(--tpa-kelly);
}

/* ---- ready-made classes ---- */
/* Written out (not var(--tpa-card-rain)) so --tpa-tile set on the element itself takes effect. */
.tpa-bg { background:
  var(--tpa-cards) 0 0 / var(--tpa-tile) var(--tpa-tile),
  radial-gradient(ellipse 75% 85% at 50% 112%, var(--tpa-seafoam), transparent 70%),
  var(--tpa-kelly); }

.tpa-display {
  font-family: var(--tpa-font-display);
  color: var(--tpa-milk);
  letter-spacing: var(--tpa-display-tracking);
  line-height: var(--tpa-display-leading);
  -webkit-text-stroke: var(--tpa-stroke) var(--tpa-pine);
  paint-order: stroke fill;
  text-shadow: var(--tpa-drop);
}
.tpa-display em, .tpa-display .hot { font-style: normal; color: var(--tpa-gold); }
.tpa-tilt { transform: rotate(var(--tpa-tilt)); }

.tpa-tag {
  font: 800 1rem/1 var(--tpa-font-ui);
  letter-spacing: var(--tpa-tag-tracking);
  text-transform: uppercase;
  color: var(--tpa-milk);
}

.tpa-badge {
  display: inline-block;
  background: var(--tpa-pine);
  color: var(--tpa-gold);
  font: 800 .9rem/1 var(--tpa-font-ui);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .45em .9em;
  border-radius: var(--tpa-radius-pill);
}

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