/* Parallel Union — Design Tokens
 * Streetwear / lifestyle apparel brand inspired by gritty B&W film photography,
 * monolithic condensed typography, and a no-frills monochrome UI that lets
 * product + image do the shouting.
 *
 * The token model is adapted from the Nike "Podium CDS" pattern:
 *   - Brutally monochromatic UI surfaces
 *   - A handful of semantic accents (red / blue / green) reserved for state
 *   - Pill-shaped buttons + sharp-cornered imagery
 *   - 8px spacing rhythm
 */

@font-face {
  font-family: "PU Display";
  src: local("Anton"), local("Bebas Neue"), local("Impact");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* ---------------------------------------------------------------- *
   * COLORS — Core monochrome
   * Parallel Union UI is intentionally black, white, and grey.
   * Color enters through photography (B&W film), not the interface.
   * ---------------------------------------------------------------- */
  --pu-black:           #0B0B0B;   /* primary text + buttons; not pure #000 */
  --pu-white:           #FFFFFF;   /* primary canvas */
  --pu-bone:            #F4F1EC;   /* off-white used for warm sections */
  --pu-ink:             #141414;   /* near-black surfaces (hero overlays) */

  /* Greys — disciplined ramp from snow to charcoal */
  --pu-grey-50:         #FAFAFA;
  --pu-grey-100:        #F2F2F2;
  --pu-grey-200:        #E5E5E5;
  --pu-grey-300:        #CFCFCF;
  --pu-grey-400:        #9E9E9E;
  --pu-grey-500:        #707070;
  --pu-grey-600:        #4B4B4D;
  --pu-grey-700:        #2A2A2C;
  --pu-grey-800:        #1A1A1C;
  --pu-grey-900:        #0F0F10;

  /* ---------------------------------------------------------------- *
   * COLORS — Semantic accents (use SPARINGLY)
   * Reserved for state. Never decorative.
   * ---------------------------------------------------------------- */
  --pu-red:             #C8102E;   /* errors, sale, urgency */
  --pu-red-dark:        #8E0A20;
  --pu-green:           #1F7A3A;   /* success, in-stock */
  --pu-blue:            #1151FF;   /* links */
  --pu-yellow:          #F2C94C;   /* warning */
  --pu-focus:           rgba(39, 93, 197, 1);

  /* ---------------------------------------------------------------- *
   * COLORS — Semantic roles
   * ---------------------------------------------------------------- */
  --pu-fg-1:            var(--pu-black);    /* primary text */
  --pu-fg-2:            var(--pu-grey-500); /* secondary copy / metadata */
  --pu-fg-3:            var(--pu-grey-400); /* disabled / tertiary */
  --pu-fg-on-dark:      var(--pu-white);

  --pu-bg-1:            var(--pu-white);    /* page canvas */
  --pu-bg-2:            var(--pu-grey-100); /* card / input fill */
  --pu-bg-3:            var(--pu-grey-200); /* hover surface */
  --pu-bg-dark:         var(--pu-ink);      /* inverted sections */
  --pu-bg-bone:         var(--pu-bone);     /* warm editorial blocks */

  --pu-border-1:        var(--pu-grey-300); /* default border */
  --pu-border-2:        var(--pu-grey-200); /* subtle divider */
  --pu-border-active:   var(--pu-black);

  /* ---------------------------------------------------------------- *
   * TYPOGRAPHY
   * Display: condensed sans (Anton fallback for "PU Display")
   * Body:    Inter (Helvetica Neue stand-in)
   * ---------------------------------------------------------------- */
  --pu-font-display:    "PU Display", "Anton", "Oswald", "Bebas Neue", "Helvetica Neue", Impact, sans-serif;
  --pu-font-body:       "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pu-font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------- *
   * SPACING — 4px base, 8px rhythm
   * ---------------------------------------------------------------- */
  --pu-space-1:   4px;
  --pu-space-2:   8px;
  --pu-space-3:   12px;
  --pu-space-4:   16px;
  --pu-space-5:   20px;
  --pu-space-6:   24px;
  --pu-space-7:   32px;
  --pu-space-8:   48px;
  --pu-space-9:   64px;
  --pu-space-10:  80px;
  --pu-space-11:  120px;

  /* ---------------------------------------------------------------- *
   * RADII — Sharp imagery, pill buttons.
   * ---------------------------------------------------------------- */
  --pu-radius-0:    0px;     /* photography, hero */
  --pu-radius-sm:   2px;     /* badges, tags */
  --pu-radius-md:   8px;     /* form inputs */
  --pu-radius-lg:   16px;    /* containers */
  --pu-radius-pill: 999px;   /* buttons, filters */

  /* ---------------------------------------------------------------- *
   * ELEVATION — Almost flat. Depth through value, not shadow.
   * ---------------------------------------------------------------- */
  --pu-shadow-none: none;
  --pu-divider-inset: 0px -1px 0px 0px var(--pu-grey-200) inset;
  --pu-focus-ring: 0 0 0 2px var(--pu-focus);
  --pu-overlay-scrim: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);

  /* ---------------------------------------------------------------- *
   * MOTION
   * ---------------------------------------------------------------- */
  --pu-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --pu-dur-fast:    160ms;
  --pu-dur:         220ms;
  --pu-dur-slow:    420ms;
}

/* ====================================================================
 * BASE TYPE CLASSES — semantic element styles
 * ====================================================================*/

html, body {
  font-family: var(--pu-font-body);
  color: var(--pu-fg-1);
  background: var(--pu-bg-1);
  -webkit-font-smoothing: antialiased;
}

.pu-display {
  font-family: var(--pu-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.88;
}

.pu-h1, h1.pu {
  font-family: var(--pu-font-display);
  font-size: clamp(56px, 9vw, 128px);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.pu-h2, h2.pu {
  font-family: var(--pu-font-display);
  font-size: clamp(40px, 5vw, 72px);
  text-transform: uppercase;
  line-height: 0.92;
  font-weight: 400;
}
.pu-h3, h3.pu {
  font-family: var(--pu-font-display);
  font-size: 32px;
  text-transform: uppercase;
  line-height: 1.0;
  font-weight: 400;
}
.pu-eyebrow {
  font-family: var(--pu-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pu-fg-2);
}
.pu-body {
  font-family: var(--pu-font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--pu-fg-1);
}
.pu-body-sm {
  font-family: var(--pu-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pu-fg-2);
}
.pu-link {
  font-family: var(--pu-font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pu-fg-1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.pu-caption {
  font-family: var(--pu-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pu-fg-2);
}
.pu-mono {
  font-family: var(--pu-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Helpers */
.pu-grain {
  position: relative;
}
.pu-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}