/* ============================================================
   GUMMY BEAR HITMEN — Colors & Type Foundations
   Import this file into any HTML artifact:
   <link rel="stylesheet" href="colors_and_type.css">

   Fonts: Beachwood Semibold (brand display) is PROPRIETARY and ships
   only as outlined SVG wordmark/number assets in /assets. For LIVE
   headline text we use Archivo (Black/ExtraBold) as the sanctioned
   stand-in. Body copy is Inter. Both load from Google Fonts below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand palette (exact values — do not improvise) ---- */
  --navy:       #11213c;   /* Pantone 2756 — PRIMARY, dominant base */
  --mid-navy:   #11426d;   /* Pantone 2955 — depth, gradients, panels */
  --cream:      #fff9c8;   /* signature throwback cream-jersey */
  --light-blue: #41afde;   /* Pantone 2915 — primary accent */
  --red:        #be2026;   /* Pantone 1805 — punch accent, sparingly */
  --white:      #ffffff;   /* formal docs, high legibility */

  /* ---- Tonal helpers (derived; keep within family) ---- */
  --navy-900:   #0b1729;   /* deepest navy for gradient floors */
  --navy-800:   #11213c;
  --navy-700:   #11426d;
  --navy-line:  rgba(255,249,200,.16);  /* hairline on navy (cream @ low alpha) */
  --cream-line: rgba(17,33,60,.14);     /* hairline on cream/white */
  --light-blue-soft: rgba(65,175,222,.18);

  /* ---- Semantic foreground / background ---- */
  --bg:            var(--navy);          /* default social background */
  --bg-doc:        var(--white);         /* default formal-doc background */
  --bg-cream:      var(--cream);         /* cream-jersey base */
  --panel:         var(--mid-navy);      /* secondary panel on navy */

  --fg-on-navy:        var(--cream);     /* primary text on navy */
  --fg-on-navy-muted:  rgba(255,249,200,.62);
  --fg-accent:         var(--light-blue);
  --fg-spark:          var(--red);
  --fg-on-cream:       var(--navy);      /* text on cream/white */
  --fg-on-cream-muted: rgba(17,33,60,.60);

  /* ---- Type families ---- */
  --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif; /* Beachwood stand-in */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ---- Type scale (display = Archivo, tight, loud) ---- */
  --fs-display:  clamp(48px, 7vw, 104px);
  --fs-h1:       clamp(36px, 4.4vw, 64px);
  --fs-h2:       clamp(26px, 2.6vw, 38px);
  --fs-h3:       21px;
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-eyebrow:  13px;

  /* ---- The signature tracking ---- */
  --track-hitmen: 0.34em;   /* the spaced "H I T M E N" */
  --track-eyebrow: 0.22em;  /* eyebrows / labels / stat lines */

  /* ---- Radii — squared & athletic, never soft/pill-y on chrome ---- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* ---- Elevation (used sparingly; brand is flat & printed) ---- */
  --shadow-card: 0 18px 40px -20px rgba(11,23,41,.55);
  --shadow-badge: 0 8px 24px -10px rgba(11,23,41,.65);

  /* ---- Pinstripe texture (light-blue rules on the CREAM base only — never navy) ---- */
  --pinstripe-cream: repeating-linear-gradient(90deg,
      transparent 0 21px, rgba(65,175,222,.55) 21px 24px);

  /* ---- Signature navy depth gradient ---- */
  --grad-navy: radial-gradient(120% 120% at 50% 0%, var(--mid-navy) 0%, var(--navy) 48%, var(--navy-900) 100%);
}

/* ============================================================
   SEMANTIC TYPE — apply these classes or copy the rules
   ============================================================ */

.gbh-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.gbh-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.gbh-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.02;
  text-transform: uppercase;
}

.gbh-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* The signature spaced HITMEN tracking — for the chest-mark feel */
.gbh-hitmen {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-hitmen);
  /* nudge: tracking adds trailing space; pull it back optically */
  margin-right: calc(var(--track-hitmen) * -1);
}

/* Eyebrow / label / stat line */
.gbh-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
}

.gbh-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: 0;
}

.gbh-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Numbers / jersey digits — Archivo, heavy, slightly condensed feel */
.gbh-number {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.85;
  font-variant-numeric: lining-nums;
}