/* ============================================================
   Pubity Group Design System — colors & type
   ============================================================
   Pubity is a youth-culture social publisher. The visual
   language is LOUD: saturated primaries, chunky rounded
   sans-serif, hard black outlines, halftone-dot patterns.
   Every brand-family moment flips the background colour —
   yellow, magenta, cyan, green, orange, black — while type
   stays flat black or flat white.
   ============================================================ */

/* Full Montserrat weight range (100–900, regular + italic) via CDN.
   Covers every request across the system. Local TTFs below remain
   authoritative for 600 and 800 — the two canonical brand weights. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@font-face {
  font-family: "Pubity Display";
  src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pubity Display";
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Fallback weights — map "Pubity Display" at any other weight to the
   Google CDN Montserrat face so requests for 100–500, 700, 900 render
   at the right weight instead of falling back to the nearest local. */
@font-face{
  font-family:"Pubity Display";
  src:local("Montserrat"),local("Montserrat-Regular");
  font-weight:100 500;
  font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Pubity Display";
  src:local("Montserrat"),local("Montserrat-Bold");
  font-weight:700;
  font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Pubity Display";
  src:local("Montserrat"),local("Montserrat-Black");
  font-weight:900;
  font-style:normal;font-display:swap;
}

:root {
  /* -------- Brand primaries (official Pubity Group spec) ---- */
  --pg-yellow:       #FFEB00;   /* Pubity primary, signature  */
  --pg-magenta:      #FF0058;   /* Red / "99% chance"         */
  --pg-red:          #FF0058;   /* alias                      */
  --pg-cyan:         #00CBFF;   /* Blue / "Trust is earned"   */
  --pg-blue:         #00CBFF;   /* alias                      */
  --pg-green:        #00FFA6;   /* "The result"               */
  --pg-orange:       #FFA000;   /* "Live from the feed"       */
  --pg-purple:       #D10DFF;   /* Comment bubble accent      */
  --pg-grey:         #282828;   /* Brand grey                 */
  --pg-pink-hot:     #FF2DB4;   /* GirlyZar / Gamingzar       */

  /* -------- Neutrals / ink --------------------------------- */
  /* Brand spec: grey + paper are the only neutrals.           */
  --pg-ink:          #282828;
  --pg-grey:         #282828;
  --pg-paper:        #FFFFFF;
  --pg-line:         #282828;   /* hard outline              */

  /* -------- Semantic tokens -------------------------------- */
  --pg-bg:           var(--pg-yellow);
  --pg-fg:           var(--pg-ink);
  --pg-fg-inverse:   var(--pg-paper);
  --pg-accent:       var(--pg-magenta);

  /* -------- Radii (always fully rounded pills + big cards) -- */
  --pg-radius-pill:  999px;
  --pg-radius-xl:    40px;
  --pg-radius-lg:    28px;
  --pg-radius-md:    18px;
  --pg-radius-sm:    10px;

  /* -------- Border weights ---------------------------------- */
  --pg-stroke-hair:  2px;
  --pg-stroke-mid:   3px;
  --pg-stroke-heavy: 5px;
  --pg-stroke-xl:    8px;

  /* -------- Offset shadows (solid 45° extrusion, grey) ----- */
  /* Use stacked 1px-step shadows to fill the gap so the       */
  /* shadow reads as a connected extrusion, not a floating box.*/
  --pg-offset-sm: 1px 1px 0 var(--pg-grey), 2px 2px 0 var(--pg-grey), 3px 3px 0 var(--pg-grey), 4px 4px 0 var(--pg-grey);
  --pg-offset-md: 1px 1px 0 var(--pg-grey), 2px 2px 0 var(--pg-grey), 3px 3px 0 var(--pg-grey), 4px 4px 0 var(--pg-grey), 5px 5px 0 var(--pg-grey), 6px 6px 0 var(--pg-grey), 7px 7px 0 var(--pg-grey), 8px 8px 0 var(--pg-grey);
  --pg-offset-lg: 1px 1px 0 var(--pg-grey), 2px 2px 0 var(--pg-grey), 3px 3px 0 var(--pg-grey), 4px 4px 0 var(--pg-grey), 5px 5px 0 var(--pg-grey), 6px 6px 0 var(--pg-grey), 7px 7px 0 var(--pg-grey), 8px 8px 0 var(--pg-grey), 9px 9px 0 var(--pg-grey), 10px 10px 0 var(--pg-grey), 11px 11px 0 var(--pg-grey), 12px 12px 0 var(--pg-grey);

  /* -------- Type families ---------------------------------- */
  /* Brand face is Montserrat (ExtraBold 800 + SemiBold 600).  */
  --pg-font-display: "Pubity Display", "Montserrat", system-ui, sans-serif;
  --pg-font-body:    "Pubity Display", "Montserrat", system-ui, -apple-system, sans-serif;
  --pg-font-handwritten: "Permanent Marker", "Caveat", cursive;

  /* -------- Type scale (deck is 2880 × 1620, scaled) -------- */
  --pg-fs-hero:    clamp(56px, 9vw, 176px);  /* "Made for youth" */
  --pg-fs-display: clamp(40px, 6vw, 120px);  /* "Our ecosystem"  */
  --pg-fs-h1:      clamp(32px, 4vw, 72px);
  --pg-fs-h2:      clamp(26px, 3vw, 48px);
  --pg-fs-h3:      clamp(20px, 2vw, 32px);
  --pg-fs-body:    18px;
  --pg-fs-small:   14px;

  /* -------- Spacing scale (4px base) ------------------------ */
  --pg-s-1:  4px;
  --pg-s-2:  8px;
  --pg-s-3:  12px;
  --pg-s-4:  16px;
  --pg-s-5:  24px;
  --pg-s-6:  32px;
  --pg-s-7:  48px;
  --pg-s-8:  64px;
  --pg-s-9:  96px;
}

/* ---------- Semantic aliases ---------- */
.pg-display, h1.pg {
  font-family: var(--pg-font-display);
  font-weight: 800;
  font-size: var(--pg-fs-display);
  letter-spacing: -0.025em;
  line-height: 0.9;
  color: var(--pg-fg);
}
.pg-hero {
  font-family: var(--pg-font-display);
  font-weight: 800;
  font-size: var(--pg-fs-hero);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
h2.pg, .pg-h2 {
  font-family: var(--pg-font-display);
  font-weight: 800;
  font-size: var(--pg-fs-h2);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
h3.pg, .pg-h3 {
  font-family: var(--pg-font-display);
  font-weight: 800;
  text-transform: none;
  font-size: var(--pg-fs-h3);
  line-height: 1.05;
}
p.pg, .pg-body {
  font-family: var(--pg-font-body);
  font-weight: 600;
  font-size: var(--pg-fs-body);
  line-height: 1.35;
  color: var(--pg-fg);
}
.pg-caption {
  font-family: var(--pg-font-body);
  font-weight: 700;
  font-size: var(--pg-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pg-handwritten {
  font-family: var(--pg-font-handwritten);
  font-weight: 400;
}