/* ============================================================
   URBAN ROOSTER — DESIGN TOKENS
   Palette pulled DIRECTLY from Urban Rooster Brand Guide p.8
   Cyan #00AEEF · Yellow #FEDA00 · Violet #6D499D · Rubine #D51E5D
   Type: Montserrat (SemiBold titles / Regular body) — brand guide p.9
   Surface rules (p.3–6):
     · Main logos go on WHITE / YELLOW / VIOLET
     · Reversed logos go on BLACK
     · Never on cyan or rubine
   ============================================================ */

:root {
  /* ---------- BRAND COLORS (verbatim from the guide) ---------- */
  --cyan:     #00AEEF;   /* C100 M0  Y0   K0 */
  --yellow:   #FEDA00;   /* C2   M11 Y100 K0 */
  --violet:   #6D499D;   /* C69  M84 Y0   K0 */
  --rubine:   #D51E5D;   /* C11  M99 Y48  K1 */
  --black:    #000000;
  --white:    #FFFFFF;

  /* ---------- SEMANTIC ROLES ----------
     Violet = primary brand surface (per logo-usage rule)
     Yellow = accent / highlight / soft hero ground
     Rubine = punch / CTA / alert
     Cyan   = supporting accent for data/links/illustrative
     White  = canvas / paper
     Black  = ink
  ----------------------------------------- */
  --brand:      var(--violet);
  --accent:     var(--yellow);
  --punch:      var(--rubine);
  --support:    var(--cyan);
  /* canvas: bright white with halftone pattern layered on top */
  --canvas:     #FFFFFF;
  --ink:        var(--black);

  /* tonal helpers (derived, kept minimal) */
  --violet-deep: #4F3478;
  --ink-muted:   #5A5A5A;
  --canvas-2:    #F2F2F2;   /* light gray wash for layered surfaces */
  --canvas-pure: #FFFFFF;   /* true white if a surface needs it */

  /* ---------- LEGACY ALIASES ----------
     Earlier passes referenced a different (made-up) palette.
     These aliases re-route them to the brand-guide colors so existing
     pages keep compiling. New work should use the brand names directly.
  ----------------------------------------- */
  --coop-red:      var(--rubine);   /* primary punch (was made-up brick) */
  --coop-red-deep: #A0163E;
  --yolk:          var(--yellow);
  --sky:           var(--cyan);
  --ink-2:         #1A1A1A;
  --dust:          var(--violet);   /* legacy "dust" remap */

  /* ---------- TYPE ---------- */
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* per brand guide: headline = 3x body, leading = body + 4
     body 16 → leading 20; H1 hero ~ 3x at responsive scale */
  --fs-body:      1rem;           /* 16px base */
  --lh-body:      1.6;
  --fs-small:     0.8125rem;     /* 13 */
  --fs-eyebrow:   0.75rem;       /* 12 caps */

  --fs-h4:        1.25rem;
  --fs-h3:        1.75rem;
  --fs-h2:        2.5rem;
  --fs-h1:        clamp(3rem, 8vw, 6.5rem);
  --fs-display:   clamp(4rem, 14vw, 12rem);

  --tracking-tight: -0.025em;
  --tracking-display: -0.035em;
  --tracking-caps:  0.08em;

  /* ---------- SPACE ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max-w: 1440px;

  /* ---------- RADII ---------- */
  --r-1: 2px;
  --r-2: 6px;
  --r-3: 12px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;

  /* ---------- SHADOWS (sticker / stamp) ---------- */
  --shadow-stamp:    6px 6px 0 0 var(--ink);
  --shadow-stamp-sm: 4px 4px 0 0 var(--ink);
  --shadow-stamp-violet: 6px 6px 0 0 var(--violet);
  --shadow-stamp-rubine: 6px 6px 0 0 var(--rubine);
  --shadow-paper: 0 1px 0 rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08);

  /* ---------- MOTION ---------- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-squeegee: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body {
  scrollbar-gutter: stable;
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* super-light halftone dot texture on the page canvas — printed-paper feel.
   Applied to body via fixed pseudo-element AND to any cream-painted section
   via the .has-halftone class (so sections that paint over the body still
   carry the texture). */
body::before, .has-halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(0,0,0,0.09) 1px, transparent 1.6px);
  background-size: 12px 12px;
  background-position: 0 0;
  pointer-events: none;
}
body::before { position: fixed; z-index: -1; }
.has-halftone { position: relative; isolation: isolate; }
.has-halftone > * { position: relative; z-index: 1; }

img, video, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--rubine); }

/* ---------- TYPOGRAPHIC PRIMITIVES ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.h-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.86;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.h-1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}

.h-2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.h-3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.15;
  margin: 0;
}

.h-4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin: 0;
}

.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.body-lg { font-size: 1.125rem; line-height: 1.6; }
.body-sm { font-size: var(--fs-small); line-height: 1.5; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.rule {
  height: 0;
  border: 0;
  border-top: var(--bw-2) solid var(--ink);
  margin: 0;
}
.rule-thick { border-top-width: var(--bw-4); }

/* ---------- BUTTONS / STAMPS ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--canvas);
  --btn-shadow: var(--shadow-stamp);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--btn-shadow);
  transition: transform var(--dur-fast) var(--ease-pop),
              box-shadow var(--dur-fast) var(--ease-pop),
              background var(--dur-base);
  position: relative;
  cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 0 var(--ink); }
.btn:active, .btn.is-pressed { transform: translate(4px, 4px); box-shadow: 2px 2px 0 0 var(--ink); }

.btn--violet { --btn-bg: var(--violet); --btn-fg: var(--white); }
.btn--violet:hover { background: var(--violet-deep); }
.btn--rubine { --btn-bg: var(--rubine); --btn-fg: var(--white); }
.btn--yolk   { --btn-bg: var(--yellow); --btn-fg: var(--ink); }
.btn--canvas  { --btn-bg: var(--white);  --btn-fg: var(--ink); }
.btn--ghost  { --btn-bg: transparent;   --btn-fg: var(--ink); --btn-shadow: none; }
.btn--ghost:hover { background: var(--ink); color: var(--canvas); box-shadow: var(--shadow-stamp); }
.btn--lg { padding: 1.1rem 1.7rem; font-size: 1rem; }

/* legacy alias from earlier passes — keeps existing markup compiling */
.btn--brick { --btn-bg: var(--rubine); --btn-fg: var(--white); }

/* ---------- CARDS ---------- */
.card {
  background: var(--canvas);
  border: var(--bw-3) solid var(--ink);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-stamp);
  transition: transform var(--dur-base) var(--ease-pop),
              box-shadow var(--dur-base) var(--ease-pop);
  position: relative;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 0 var(--ink); }
.card--violet { background: var(--violet); color: var(--white); }
.card--yolk   { background: var(--yellow); color: var(--ink); }
.card--ink    { background: var(--ink); color: var(--canvas); }
.card--cream2 { background: var(--canvas-2); }
/* alias kept */
.card--brick  { background: var(--rubine); color: var(--white); }

/* ---------- BADGES / TAGS ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--canvas);
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink);
}
.tag--violet { background: var(--violet); color: var(--white); border-color: var(--violet); }
.tag--rubine { background: var(--rubine); color: var(--white); border-color: var(--rubine); }
.tag--yolk   { background: var(--yellow); }
.tag--ink    { background: var(--ink); color: var(--canvas); }
/* alias kept */
.tag--brick  { background: var(--rubine); color: var(--white); border-color: var(--rubine); }

/* ---------- INPUTS ---------- */
.input, .select, .textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--canvas);
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink);
  transition: box-shadow var(--dur-fast);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  box-shadow: var(--shadow-stamp-sm);
  transform: translate(-2px, -2px);
}

/* ---------- STAMP / RADAR ---------- */
.stamp-mark {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: var(--bw-2) solid currentColor;
  border-radius: var(--r-1);
  transform: rotate(-3deg);
}

/* ---------- UTIL ---------- */
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.text-canvas { color: var(--canvas); }
.text-violet { color: var(--violet); }
.text-rubine { color: var(--rubine); }
.text-cyan   { color: var(--cyan); }
.text-ink { color: var(--ink); }
.text-muted { color: var(--ink-muted); }
.bg-violet { background: var(--violet); color: var(--white); }
.bg-rubine { background: var(--rubine); color: var(--white); }
.bg-yolk   { background: var(--yellow); color: var(--ink); }
.bg-cyan   { background: var(--cyan); color: var(--ink); }
.bg-ink    { background: var(--ink); color: var(--canvas); }
.bg-canvas  { background: var(--canvas); }
.bg-canvas-2 { background: var(--canvas-2); }
/* aliases kept */
.text-brick { color: var(--rubine); }
.bg-brick   { background: var(--rubine); color: var(--white); }
.uppercase { text-transform: uppercase; }
.no-underline { text-decoration: none; }
.relative { position: relative; }

/* ---------- SQUEEGEE REVEAL ---------- */
.squeegee {
  --d: 0ms;
  clip-path: inset(0 100% 0 0);
  animation: squeegee 600ms var(--ease-squeegee) forwards;
  animation-delay: var(--d);
}
@keyframes squeegee { to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .squeegee, .card, .btn { animation: none !important; transition: none !important; }
  .squeegee { clip-path: none; }
}

/* ---------- PAPER NOISE / GRAIN (subtle) ---------- */
.paper-grain {
  position: relative;
  isolation: isolate;
}
.paper-grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.4;
}
.paper-grain > * { position: relative; z-index: 2; }