/* Swenor's Weiners — base layer.
   Load order: tokens.css -> base.css -> components.css
   Fonts: Google Fonts (Alfa Slab One, Oswald 400/600/700, Yellowtail, Barlow 400/500/600/700). */

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

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

body {
  margin: 0;
  background-color: var(--sw-bg);
  color: var(--sw-text);
  font-family: var(--sw-font-body);
  font-size: var(--sw-text-md);
  line-height: var(--sw-lead-normal);
  /* Paper grain. The whole system sits on aged stock, never flat white. */
  background-image: var(--sw-texture-paper, none);
  background-blend-mode: multiply;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ---------- Typography ---------- */

/* .sw-display — the SWENOR'S wordmark voice.
   Rules: uppercase only, >=24px only, never more than 4 words, never for body copy.
   The cream-fill-with-ink-outline treatment comes from the flier lockup. */
.sw-display {
  font-family: var(--sw-font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--sw-lead-tight);
  letter-spacing: var(--sw-track-tight);
  font-size: clamp(var(--sw-text-3xl), 6vw, var(--sw-text-5xl));
  margin: 0;
}

/* Outlined-on-dark variant, matching the logo's cream face + heavy ink keyline. */
.sw-display--outline {
  color: var(--sw-paper-100);
  -webkit-text-stroke: 2px var(--sw-ink-900);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--sw-red-800);
}

/* .sw-headline — condensed workhorse. Every sub-head, nav item, button, label. */
.sw-headline {
  font-family: var(--sw-font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sw-track-wide);
  line-height: var(--sw-lead-snug);
  margin: 0;
}

.sw-h1 { font-size: var(--sw-text-4xl); }
.sw-h2 { font-size: var(--sw-text-3xl); }
.sw-h3 { font-size: var(--sw-text-2xl); }
.sw-h4 { font-size: var(--sw-text-xl); }

/* .sw-eyebrow — the "PREMIUM ALL-BEEF WEINERS" / "FUELED BY SAUSAGE" tier. */
.sw-eyebrow {
  font-family: var(--sw-font-headline);
  font-weight: 600;
  font-size: var(--sw-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--sw-track-wider);
  color: var(--sw-text-muted);
}

/* .sw-script — "Locally Smoked & Always Juicy". ONE per screen. Never a heading,
   never a button, never more than ~6 words. Always red or mustard. */
.sw-script {
  font-family: var(--sw-font-script);
  font-weight: 400;
  color: var(--sw-brand);
  font-size: var(--sw-text-xl);
  line-height: var(--sw-lead-snug);
}

.sw-body     { font-family: var(--sw-font-body); line-height: var(--sw-lead-relaxed); }
.sw-body-lg  { font-size: var(--sw-text-lg); line-height: var(--sw-lead-relaxed); }
.sw-body-sm  { font-size: var(--sw-text-sm); }
.sw-muted    { color: var(--sw-text-muted); }

a { color: var(--sw-brand); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--sw-brand-hover); }

/* ---------- Focus ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sw-focus);
  outline-offset: 2px;
  border-radius: var(--sw-radius-sm);
}

/* ---------- Layout ---------- */
.sw-container { width: 100%; max-width: var(--sw-container); margin-inline: auto; padding-inline: var(--sw-space-5); }
.sw-container--narrow { max-width: var(--sw-container-narrow); }
.sw-section { padding-block: var(--sw-space-8); }
.sw-stack > * + * { margin-top: var(--sw-space-4); }
.sw-stack-lg > * + * { margin-top: var(--sw-space-6); }
.sw-row { display: flex; align-items: center; gap: var(--sw-space-3); flex-wrap: wrap; }

/* ---------- Rules & dividers ---------- */
/* The flier's signature: a 2px rule broken by a diamond or three stars. */
.sw-rule {
  border: 0;
  border-top: var(--sw-border-rule) solid var(--sw-border);
  margin-block: var(--sw-space-4);
}

.sw-rule-stars {
  display: flex;
  align-items: center;
  gap: var(--sw-space-3);
  color: var(--sw-brand);
}
.sw-rule-stars::before,
.sw-rule-stars::after {
  content: "";
  flex: 1;
  border-top: var(--sw-border-rule) solid currentColor;
}
.sw-rule-stars > span { font-size: var(--sw-text-sm); letter-spacing: var(--sw-track-wider); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}