/* IWW NYC — design-system tokens + utilities (generated, self-contained). */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   IWW NYC — WEBFONTS
   Gig-poster condensed (Anton), ransom chunk (Archivo Black),
   workhorse grotesque (Archivo), typewriter zine (Space Mono).
   NOTE: served from Google Fonts CDN. For fully offline use,
   download the .woff2 binaries and rewrite these as @font-face.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Archivo+Black&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   IWW NYC — COLOR TOKENS
   Anarcho-syndicalist red & black + NYC punk neon (pink / acid green),
   printed on aged newsprint. High-contrast, photocopier-loud.
   ============================================================ */

:root {
  /* --- Base ink & paper --------------------------------------------- */
  --ink-900: #0C0C0B;   /* deepest black — backgrounds, headlines */
  --ink-800: #161513;   /* near-black surface */
  --ink-700: #25231F;   /* raised dark surface */
  --ink-600: #3A372F;   /* dark border on ink */
  --ink-400: #6E6A5E;   /* muted text on paper */
  --ink-300: #908B7C;   /* faint / disabled ink */

  --paper-000: #FBF7EC; /* brightest sheet — modal / focus surface */
  --paper-100: #F1EADA; /* primary newsprint surface */
  --paper-200: #E7DEC9; /* recessed paper / wells */
  --paper-300: #D8CCB1; /* paper border / divider */
  --paper-400: #C2B496; /* heavy paper edge / torn shadow */

  /* --- Riot Red (anarcho-syndicalist, primary) ---------------------- */
  --red-700: #A8160F;
  --red-600: #C61C13;
  --red-500: #E3261C;   /* core RIOT RED */
  --red-400: #F0463C;
  --red-100: #F7CdC9;   /* tint on paper */

  /* --- Hot Pink (NYC neon, secondary) ------------------------------- */
  --pink-700: #B70F5E;
  --pink-600: #DE1573;
  --pink-500: #FF2E88;  /* core HOT PINK */
  --pink-400: #FF6AA9;
  --pink-100: #FFD3E4;

  /* --- Acid Green (electric, tertiary / signal) --------------------- */
  --green-700: #0A8B40;
  --green-600: #11B254;
  --green-500: #16E06A; /* core ACID GREEN */
  --green-400: #5BF09A;
  --green-100: #C5F7D9;

  /* --- Tape Yellow (highlighter / sticker accent, sparing) ---------- */
  --yellow-500: #F4D43C;
  --yellow-400: #F8E27A;

  /* ================================================================
     SEMANTIC ALIASES  — reach for these in components
     ================================================================ */

  /* Surfaces */
  --surface-page: var(--paper-100);      /* default page ground */
  --surface-card: var(--paper-000);      /* cards / sheets pasted on top */
  --surface-well: var(--paper-200);      /* inset wells, code, inputs */
  --surface-ink: var(--ink-900);         /* inverted "stage" / poster blocks */
  --surface-ink-raised: var(--ink-700);  /* raised element on ink */

  /* Text */
  --text-strong: var(--ink-900);         /* headlines on paper */
  --text-body: var(--ink-800);           /* body copy */
  --text-muted: var(--ink-400);          /* captions / meta */
  --text-faint: var(--ink-300);          /* disabled */
  --text-on-ink: var(--paper-100);       /* body on dark stage */
  --text-on-red: var(--paper-000);
  --text-on-pink: var(--ink-900);
  --text-on-green: var(--ink-900);

  /* Brand roles */
  --primary: var(--red-500);
  --primary-strong: var(--red-600);
  --primary-tint: var(--red-100);
  --secondary: var(--pink-500);
  --secondary-strong: var(--pink-600);
  --accent: var(--green-500);
  --accent-strong: var(--green-600);

  /* Lines */
  --border-ink: var(--ink-900);          /* the signature hard black rule */
  --border-soft: var(--paper-300);
  --border-strong: 3px solid var(--ink-900);
  --border-hair: 1.5px solid var(--ink-900);

  /* Status (kept in-palette) */
  --status-strike: var(--red-500);       /* on strike / alert */
  --status-solidarity: var(--green-500); /* go / confirmed */
  --status-pending: var(--yellow-500);   /* pending / caution */

  /* Focus */
  --focus-ring: var(--pink-500);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   IWW NYC — TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* --- Families ----------------------------------------------------- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;      /* tall condensed gig-poster shout */
  --font-ransom:  'Archivo Black', 'Arial Black', sans-serif;/* chunky cut-out blocks */
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif; /* workhorse */
  --font-mono:    'Space Mono', 'Courier New', monospace;   /* typewriter / zine meta */

  /* --- Type scale (poster-aggressive jumps) ------------------------- */
  --fs-display-xl: clamp(3.5rem, 9vw, 8rem); /* @kind font */ /* hero headlines */
  --fs-display-l:  clamp(2.75rem, 6vw, 5rem); /* @kind font */
  --fs-display-m:  clamp(2rem, 4vw, 3.25rem); /* @kind font */
  --fs-h1: 2.5rem;
  --fs-h2: 1.875rem;
  --fs-h3: 1.375rem;
  --fs-lead: 1.25rem;   /* intro paragraphs */
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-meta: 0.75rem;   /* mono labels / tags */

  /* --- Line heights ------------------------------------------------- */
  --lh-tight: 0.92; /* @kind font */ /* stacked display lines */
  --lh-snug: 1.05; /* @kind font */
  --lh-head: 1.12; /* @kind font */
  --lh-body: 1.55; /* @kind font */

  /* --- Tracking ----------------------------------------------------- */
  --tracking-shout: 0.01em; /* @kind font */
  --tracking-label: 0.18em; /* @kind font */ /* mono caps labels */
  --tracking-body: 0; /* @kind font */

  /* --- Weights ------------------------------------------------------ */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   IWW NYC — SPACING, RADII, SIZING
   8px base grid. Punk layouts are dense and butt-jointed —
   small radii (paper corners, not pill-soft UI).
   ============================================================ */

:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii — corners are mostly hard; tiny softening only */
  --radius-0: 0px;       /* default — cut paper, hard corners */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;  /* stickers / round buttons only */

  /* Container widths */
  --container-tight: 680px;
  --container-readable: 880px;
  --container-wide: 1200px;
  --container-full: 1440px;

  /* Control sizing */
  --control-h-sm: 34px;
  --control-h-md: 44px;   /* default tap target */
  --control-h-lg: 56px;
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   IWW NYC — EFFECTS: borders, shadows, textures, motion
   The look is FLAT + HARD. Shadows are offset solid blocks
   (screenprint registration / drop-stack), never soft blur.
   ============================================================ */

:root {
  /* --- Hard offset "block" shadows (the signature) ------------------ */
  --shadow-hard-sm: 3px 3px 0 0 var(--ink-900);
  --shadow-hard-md: 6px 6px 0 0 var(--ink-900);
  --shadow-hard-lg: 10px 10px 0 0 var(--ink-900);
  --shadow-hard-red: 6px 6px 0 0 var(--red-500);
  --shadow-hard-pink: 6px 6px 0 0 var(--pink-500);
  --shadow-hard-green: 6px 6px 0 0 var(--green-500);

  /* Rare soft shadow — only for floating overlays (dialogs/toasts) */
  --shadow-float: 0 18px 40px -12px rgba(12,12,11,0.55);

  /* --- Misregistration / "off-press" offsets ----------------------- */
  --misreg: 2px; /* @kind other */ /* CMYK-style channel offset distance */

  /* --- Motion ------------------------------------------------------- */
  /* Snappy, mechanical — like a stamp or a switch. No lazy ease. */
  --ease-stamp: cubic-bezier(0.2, 0.9, 0.1, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1); /* @kind other */
  --dur-fast: 90ms; /* @kind other */
  --dur-base: 160ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* Default tilt for "pasted up" elements */
  --tilt-sm: -1.2deg; /* @kind other */
  --tilt-md: -2.5deg; /* @kind other */
  --tilt-counter: 1.5deg; /* @kind other */

  /* --- Halftone / newsprint texture (data-URI, no external asset) --- */
  /* Subtle dot screen — layer over surfaces with mix-blend or low opacity */
  --texture-halftone:
    radial-gradient(circle at center, rgba(12,12,11,0.5) 0.6px, transparent 0.9px); /* @kind other */
  --texture-halftone-size: 4px 4px; /* @kind other */

  /* Diagonal hazard / picket stripe */
  --texture-picket: repeating-linear-gradient(
    -45deg,
    var(--ink-900) 0 14px,
    var(--yellow-500) 14px 28px
  ); /* @kind other */

  /* Newsprint grain (fine noise via layered gradients) */
  --texture-grain-opacity: 0.06; /* @kind other */

  /* ============================================================
     CONSTRUCTIVIST — diagonals, wedges, rays
     The merged punk/agitprop language: everything cuts on an angle.
     ============================================================ */
  /* Sunburst / agitator rays (the IWW sunrise, recontextualized) */
  --rays-color: var(--red-500); /* @kind other */
  --texture-rays: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--rays-color) 0deg 7deg,
    transparent 7deg 14deg
  ); /* @kind other */

  /* Diagonal skews / tilts used on bands, wedges, pasted blocks */
  --skew-band: -6deg; /* @kind other */ /* full-bleed diagonal band slant */
  --angle-wedge: 12deg; /* @kind other */ /* constructivist wedge angle */
  --tilt-lg: -4deg; /* @kind other */
  --tilt-pos-sm: 2deg; /* @kind other */

  /* Clip-paths for constructivist cut shapes */
  --clip-wedge: polygon(0 0, 100% 0, 100% 64%, 0 100%); /* @kind other */
  --clip-flag: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%); /* @kind other */
  --clip-torn: polygon(0 4%, 8% 0, 24% 5%, 41% 1%, 58% 6%, 74% 1%, 92% 5%, 100% 2%, 99% 96%, 88% 100%, 70% 95%, 52% 100%, 33% 95%, 16% 100%, 3% 96%); /* @kind other */

  /* ============================================================
     MOTION — DIY cutout (Terry Gilliam, but punk).
     Pinned-paper sway, mechanical stamp, photocopier flicker.
     ============================================================ */
  --dur-sway: 3.6s; /* @kind other */
  --dur-flutter: 0.9s; /* @kind other */
  --dur-ticker: 24s; /* @kind other */
  --ease-cutout: cubic-bezier(0.37, 0, 0.63, 1); /* @kind other */

  /* Cutout white keyline (Reid/Gilliam scissor-cut edge) */
  --cutout-keyline: 3px; /* @kind other */
}

/* ============================================================
   KEYFRAMES — DIY stop-motion. Irregular, asymmetric, hinged at a pin;
   played back through steps() (see base.css) for a hand-cut, low-frame-rate
   cut-out feel — NOT smooth easing. Guarded by prefers-reduced-motion.
   Each rocks around an optional base --tilt so tilted scraps keep their angle.
   ============================================================ */
@keyframes iww-sway {
  0%   { transform: rotate(calc(var(--tilt, 0deg) - 1.8deg)) translateY(0); }
  23%  { transform: rotate(calc(var(--tilt, 0deg) + 1.3deg)) translateY(-1px); }
  41%  { transform: rotate(calc(var(--tilt, 0deg) - 0.4deg)) translateY(0.5px); }
  64%  { transform: rotate(calc(var(--tilt, 0deg) + 1.7deg)) translateY(-1.5px); }
  85%  { transform: rotate(calc(var(--tilt, 0deg) - 1.1deg)) translateY(0.5px); }
  100% { transform: rotate(calc(var(--tilt, 0deg) - 1.8deg)) translateY(0); }
}
/* one-shot hinged flap on hover — a paper corner kicking up */
@keyframes iww-flap {
  0%   { transform: rotate(var(--tilt, 0deg)); }
  20%  { transform: rotate(calc(var(--tilt, 0deg) - 6deg)) translateY(-3px); }
  46%  { transform: rotate(calc(var(--tilt, 0deg) + 4deg)) translateY(-1px); }
  72%  { transform: rotate(calc(var(--tilt, 0deg) - 2.5deg)); }
  100% { transform: rotate(var(--tilt, 0deg)); }
}
/* the signature entrance — a cut-out hinges down into place once, then rests.
   Transform-only (never fades): content is ALWAYS visible, motion is additive.
   Soulful DIY, not perpetual wiggle. Played through steps() for stop-motion. */
@keyframes iww-cut-in {
  0%   { transform: rotate(calc(var(--tilt, 0deg) - 7deg)) translateY(-12px); }
  55%  { transform: rotate(calc(var(--tilt, 0deg) + 2.5deg)) translateY(3px); }
  100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
}
@keyframes iww-stamp-in {
  0%   { transform: scale(1.9) rotate(var(--stamp-rot, -8deg)); opacity: 0; }
  55%  { transform: scale(0.9) rotate(var(--stamp-rot, -8deg)); opacity: 1; }
  78%  { transform: scale(1.06) rotate(var(--stamp-rot, -8deg)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--stamp-rot, -8deg)); opacity: 1; }
}
@keyframes iww-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes iww-flicker {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.34; }
}
@keyframes iww-wedge-in {
  0%   { transform: translateX(-110%) skewX(var(--skew-band)); }
  100% { transform: translateX(0) skewX(var(--skew-band)); }
}


/* ===== tokens/base.css ===== */
/* ============================================================
   IWW NYC — BASE: resets, element defaults, brand utilities
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background-color: var(--surface-page);
  /* faint newsprint tooth on every page */
  background-image: var(--texture-halftone);
  background-size: var(--texture-halftone-size);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings: gig-poster condensed by default ---------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-shout);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--primary-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
a:hover { color: var(--ink-900); background: var(--yellow-400); }

strong, b { font-weight: var(--fw-bold); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-well);
  padding: 0.1em 0.35em;
  border: 1px solid var(--paper-300);
}

hr {
  border: none;
  border-top: 3px solid var(--ink-900);
  margin: var(--space-6) 0;
}

::selection { background: var(--pink-500); color: var(--ink-900); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   BRAND UTILITIES — small, reusable, signature treatments
   ============================================================ */

/* Mono caps label / kicker ("LOCAL 1 · NYC") */
.iww-label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 700;
}

/* The inverted "stage" block — black poster panel */
.iww-stage {
  background: var(--surface-ink);
  color: var(--text-on-ink);
}
.iww-stage h1, .iww-stage h2, .iww-stage h3, .iww-stage h4 { color: var(--paper-000); }

/* Hard black rule used as section divider */
.iww-rule { border-top: 4px solid var(--ink-900); }

/* Pasted-up tilt — apply to cards/flyers for the gig-poster scatter */
.iww-paste { transform: rotate(var(--tilt-sm)); }
.iww-paste--counter { transform: rotate(var(--tilt-counter)); }

/* Halftone overlay — drop on any block as a screened texture */
.iww-halftone { position: relative; }
.iww-halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-halftone);
  background-size: var(--texture-halftone-size);
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Tape strip — a strip of "masking tape" pinning an element corner */
.iww-tape {
  position: absolute;
  width: 92px;
  height: 28px;
  background: rgba(244, 212, 60, 0.82);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  /* torn / cut ends */
  clip-path: polygon(3% 0, 98% 6%, 100% 92%, 2% 100%);
  transform: rotate(-4deg);
}

/* Highlighter / marker mark on inline text */
.iww-marker {
  background: linear-gradient(120deg, transparent 2%, var(--yellow-400) 2% 98%, transparent 98%);
  padding: 0 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Picket / hazard stripe band */
.iww-picket {
  background-image: var(--texture-picket);
}

/* ============================================================
   CONSTRUCTIVIST — agitprop graphic building blocks
   ============================================================ */

/* Sunburst rays — the IWW sunrise / silent-agitator radial. */
.iww-rays { background-image: var(--texture-rays); background-position: center; }

/* Full-bleed diagonal band — constructivist red slash across a section. */
.iww-band {
  position: relative;
  transform: skewY(var(--skew-band));
  transform-origin: left center;
}
.iww-band > * { transform: skewY(calc(-1 * var(--skew-band))); }

/* Red wedge — a hard-angled corner block. */
.iww-wedge { clip-path: var(--clip-wedge); }
.iww-flag  { clip-path: var(--clip-flag); }
.iww-torn  { clip-path: var(--clip-torn); }

/* Cutout — Reid/Gilliam scissor-cut edge: thick white keyline + hard offset,
   so a duotone photo or block reads as pasted-on collage. */
.iww-cutout {
  border: var(--cutout-keyline) solid var(--paper-000);
  box-shadow: var(--shadow-hard-md);
}
.iww-cutout--ink { border-color: var(--ink-900); }

/* Auto-screenprint any <img>: wrap it in .iww-duotone and the image is crushed
   to grayscale + one ink + a halftone screen. This is the CSS-only twin of the
   DuotoneImage component — drop a photo in a folder, add the class, done.
   Set the ink with --duo-ink (default red). */
.iww-duotone { position: relative; overflow: hidden; background: var(--ink-900); isolation: isolate; }
.iww-duotone > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.42) brightness(1.06);
}
.iww-duotone::before, .iww-duotone::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.iww-duotone::before { background: var(--duo-ink, var(--red-500)); mix-blend-mode: multiply; }
.iww-duotone::after {
  background-image: var(--texture-halftone); background-size: var(--texture-halftone-size);
  mix-blend-mode: multiply; opacity: 0.5;
}

/* Stenciled outline display text (constructivist stencil shout) */
.iww-stencil {
  -webkit-text-stroke: 2px var(--ink-900);
  color: transparent;
  paint-order: stroke fill;
}

/* ============================================================
   MOTION — DIY cutout. All decorative motion is OFF unless the
   user opts into animation (prefers-reduced-motion: no-preference).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Motion = entrances + interaction only. Cut-out elements hinge into place
     ONCE and rest — no perpetual idle wiggle. Stop-motion via steps(). */
  .iww-cut-in, .iww-sway {
    transform-origin: top center;
    animation: iww-cut-in 560ms steps(7, end) both;
  }
  .iww-cut-in--pin-left, .iww-sway--pin-left  { transform-origin: top left; }
  .iww-cut-in--pin-br,   .iww-sway--pin-br    { transform-origin: bottom right; }
  /* stagger siblings so they settle in sequence, not all at once */
  .iww-cut-in:nth-of-type(2) { animation-delay: 90ms; }
  .iww-cut-in:nth-of-type(3) { animation-delay: 180ms; }

  /* Flutter — a one-shot hinged flap when you hover a scrap. Use sparingly. */
  .iww-flutter:hover { animation: iww-flap 520ms steps(8, end) 1; transform-origin: bottom left; }

  /* Stamp-in — slam a seal onto the page, in stop-motion frames. */
  .iww-stamp-in { animation: iww-stamp-in 440ms steps(6, end) both; }
}

/* Ticker / marquee — scrolling agitprop slogans. Track holds the content
   twice; translate -50% loops seamlessly. Motion guarded. */
.iww-ticker { overflow: hidden; white-space: nowrap; }
.iww-ticker__track { display: inline-flex; white-space: nowrap; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .iww-ticker__track { animation: iww-ticker var(--dur-ticker) linear infinite; }
  .iww-ticker:hover .iww-ticker__track { animation-play-state: paused; }
}