/* ==========================================================================
   DEENZ 2 — Design Tokens
   Separate identity from Deenz 1 (Apparel Co.) — this is the pure-retail
   build. Palette pulled from the new stag/shield logo (black + crimson red).
   Typography: bold impact headings (Nike-style confidence) + clean body.
   ========================================================================== */

:root {
  /* Color */
  --ink:        #0B0B0C;   /* near-black — matches logo background */
  --off-white:  #F4F3F0;   /* base background */
  --white:      #FFFFFF;
  --crimson:    #D6262C;   /* accent — pulled from the logo embroidery red */
  --crimson-dark: #B01E23;
  --grey:       #8A8A8D;
  --line:       #E4E2DD;
  --ink-soft:   #1A1A1C;

  /* Type */
  --font-display: "Anton", "Archivo Black", "Arial Narrow", sans-serif; /* bold impact headings */
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  /* Scale */
  --step-xs:  0.75rem;
  --step-sm:  0.875rem;
  --step-base:1rem;
  --step-md:  1.25rem;
  --step-lg:  1.85rem;
  --step-xl:  3rem;
  --step-2xl: 4.75rem;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  --sp-7: 6rem;

  --ease: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--off-white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400; /* Anton is already a single bold weight */
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}

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

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