/* =========================================================
   Team Girl — Design Tokens
   Colors, typography, spacing, radii, shadows.
   --------------------------------------------------------
   Brand fonts:
     • Header / UI : Blauer Nue       — licensed, served from /fonts (.otf)
     • Body        : Merriweather      — Google Fonts (exact match)
     • Script      : Malibu Sunday     — substituted with Allura (Google)
   The TEAM GIRL wordmark itself ships as a static PNG/PDF
   asset (assets/logos/) — never re-set it in a system font.
   ========================================================= */

/* Blauer Nue — full family (thin → heavy, roman + italic).
   Weight map: Thin 100 · Extralight 200 · Light 300 · Regular 400
              · Medium 500 · Semibold 600 · Bold 700 · Extrabold 800 · Heavy 900
   NB: licensed family only ships Bold in italic; weight 700 falls back
   to the closest declared weight (Semibold / Extrabold). */
@font-face { font-family: "Blauer Nue"; font-weight: 100; font-style: normal;
  src: url("fonts/Blauer-Nue-Thin-iF6626350c96c3e.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 100; font-style: italic;
  src: url("fonts/Blauer-Nue-Thin-Italic-iF6626350c9204d.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 200; font-style: normal;
  src: url("fonts/Blauer-Nue-Extralight-iF6626350c56af4.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 200; font-style: italic;
  src: url("fonts/Blauer-Nue-Extralight-Italic-iF6626350c51a9c.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 300; font-style: normal;
  src: url("fonts/Blauer-Nue-Light-iF6626350c6db36.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 300; font-style: italic;
  src: url("fonts/Blauer-Nue-Light-Italic-iF6626350c68fe5.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 400; font-style: normal;
  src: url("fonts/Blauer-Nue-Regular-iF6626350c83fdf.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 400; font-style: italic;
  src: url("fonts/Blauer-Nue-Regular-Italic-iF6626350c7f4f6.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 500; font-style: normal;
  src: url("fonts/Blauer-Nue-Medium-iF6626350c78103.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 500; font-style: italic;
  src: url("fonts/Blauer-Nue-Medium-Italic-iF6626350c725e0.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 600; font-style: normal;
  src: url("fonts/Blauer-Nue-Semibold-iF6626350c8d55c.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 600; font-style: italic;
  src: url("fonts/Blauer-Nue-Semibold-Italic-iF6626350c889ba.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 700; font-style: italic;
  src: url("fonts/Blauer-Nue-Bold-Italic-iF6626350c420cc.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 800; font-style: normal;
  src: url("fonts/Blauer-Nue-Extrabold-iF6626350c4c856.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 800; font-style: italic;
  src: url("fonts/Blauer-Nue-Extrabold-Italic-iF6626350c47867.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 900; font-style: normal;
  src: url("fonts/Blauer-Nue-Heavy-iF6626350c62afa.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Blauer Nue"; font-weight: 900; font-style: italic;
  src: url("fonts/Blauer-Nue-Heavy-Italic-iF6626350c5cbff.otf") format("opentype"); font-display: swap; }

@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&family=Allura&display=swap");

:root {
  /* ---------- BRAND COLORS (verbatim from brand book) ---------- */
  --tg-magenta:        #EA21A2;  /* hot pink — primary pop */
  --tg-orange:         #EF512C;  /* red-orange — primary pop */
  --tg-cream:          #FFF9D7;  /* warm cream — light surface */
  --tg-lilac:          #F3C8F3;  /* lavender pink — soft surface */
  --tg-peach:          #FFA161;  /* peach — warm accent */

  /* ---------- NEUTRALS ---------- */
  --tg-ink:            #111111;  /* logo black, primary text */
  --tg-ink-soft:       #2A2A2A;
  --tg-muted:          #6E6E6E;  /* secondary text on light */
  --tg-line:           #1111111A;
  --tg-line-strong:    #11111133;
  --tg-paper:          #FAF6EC;  /* warm off-white used as page bg */
  --tg-paper-2:        #F3EFE3;  /* slightly deeper paper */
  --tg-white:          #FFFFFF;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:                var(--tg-paper);
  --bg-elev:           var(--tg-white);
  --bg-invert:         var(--tg-ink);
  --fg:                var(--tg-ink);
  --fg-muted:          var(--tg-muted);
  --fg-invert:         var(--tg-cream);

  /* ---------- SEMANTIC ACCENTS ---------- */
  --accent:            var(--tg-magenta);     /* primary CTA */
  --accent-warm:       var(--tg-orange);      /* secondary CTA / energy */
  --accent-soft:       var(--tg-lilac);       /* tertiary tint surface */
  --accent-cream:      var(--tg-cream);       /* tertiary tint surface */
  --accent-peach:      var(--tg-peach);

  /* ---------- BRAND GRADIENTS ----------
     The Team Girl gradient is a diagonal magenta → orange → cream
     blur, occasionally tilted into peach or lilac. Use 135deg by
     default; rotate per moment. ----------------------------- */
  --gradient-sunset:   linear-gradient(135deg, #EA21A2 0%, #EF512C 55%, #FFA161 85%, #FFF9D7 100%);
  --gradient-dawn:     linear-gradient(135deg, #F3C8F3 0%, #FFA161 55%, #FFF9D7 100%);
  --gradient-flare:    linear-gradient(135deg, #EF512C 0%, #EA21A2 60%, #F3C8F3 100%);
  --gradient-peach:    linear-gradient(180deg, #EF512C 0%, #FFA161 60%, #FFF9D7 100%);
  --gradient-bubblegum:linear-gradient(180deg, #EA21A2 0%, #F3C8F3 70%, #FFF9D7 100%);

  /* ---------- TYPOGRAPHY: families ---------- */
  --font-display: "Blauer Nue", "Helvetica Neue", system-ui, sans-serif;
  --font-sans:    "Blauer Nue", "Helvetica Neue", system-ui, sans-serif;
  --font-serif:   "Merriweather", "Times New Roman", Georgia, serif;
  --font-script:  "Allura", "Malibu Sunday", "Brush Script MT", cursive;

  /* ---------- TYPOGRAPHY: scale (modular, 1.250 major-third) ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   84px;
  --fs-7xl:   112px;
  --fs-hero:  148px;

  /* line-height */
  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* tracking */
  --ls-tight:    -0.02em;
  --ls-display:  -0.025em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-eyebrow:  0.18em;   /* used on small caps / labels */

  /* ---------- SPACING (4-pt base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 80px;
  --space-11: 120px;
  --space-12: 160px;

  /* ---------- RADII ----------
     Two systems: chunky pills/round-rect cards, and full circles for chips. */
  --r-xs:    6px;
  --r-sm:    10px;
  --r-md:    16px;
  --r-lg:    24px;
  --r-xl:    32px;
  --r-2xl:   48px;
  --r-pill:  999px;

  /* ---------- ELEVATION / SHADOWS ----------
     Team Girl prefers flat ink-on-color blocks. Shadows are soft and warm
     when used; "stamp" shadow is a hard offset (sticker feel). */
  --shadow-soft:    0 1px 2px rgba(17,17,17,0.04), 0 8px 24px rgba(17,17,17,0.06);
  --shadow-pop:     0 12px 32px rgba(234,33,162,0.18), 0 2px 4px rgba(17,17,17,0.05);
  --shadow-stamp:   6px 6px 0 var(--tg-ink);      /* sticker / risograph */
  --shadow-stamp-pink: 6px 6px 0 var(--tg-magenta);
  --shadow-inset:   inset 0 0 0 1px rgba(17,17,17,0.08);

  /* ---------- BORDERS ---------- */
  --border-hairline: 1px solid var(--tg-line);
  --border-strong:   2px solid var(--tg-ink);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle overshoot */
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container:   1240px;
  --gutter:      24px;
}

/* =========================================================
   SEMANTIC TYPOGRAPHY  (compose with the scale above)
   ========================================================= */

.tg-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
}

.tg-h1, h1.tg {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-4xl), 8vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg);
}

.tg-h2, h2.tg {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.tg-h3, h3.tg {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.tg-h4, h4.tg {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.tg-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.tg-body, p.tg {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.tg-meta, small.tg {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.tg-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 0.9;
  color: var(--fg);
}

/* The big arched "TEAM GIRL"-style display moment. Use sparingly. */
.tg-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-5xl), 14vw, var(--fs-hero));
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.tg-mark--upper { text-transform: uppercase; }

/* =========================================================
   UTILITIES
   ========================================================= */

.tg-bg-paper      { background: var(--tg-paper); color: var(--fg); }
.tg-bg-cream      { background: var(--tg-cream); color: var(--fg); }
.tg-bg-ink        { background: var(--tg-ink); color: var(--fg-invert); }
.tg-bg-magenta    { background: var(--tg-magenta); color: var(--tg-cream); }
.tg-bg-orange     { background: var(--tg-orange); color: var(--tg-cream); }
.tg-bg-lilac      { background: var(--tg-lilac); color: var(--tg-ink); }
.tg-bg-peach      { background: var(--tg-peach); color: var(--tg-ink); }
.tg-bg-sunset     { background: var(--gradient-sunset); color: var(--tg-cream); }
.tg-bg-dawn       { background: var(--gradient-dawn); color: var(--tg-ink); }
.tg-bg-flare      { background: var(--gradient-flare); color: var(--tg-cream); }
.tg-bg-bubblegum  { background: var(--gradient-bubblegum); color: var(--tg-ink); }