/* ============================================================
   ZION — Colors & Type
   Brand: ZION / LeviZion. Fire. Freedom. Freestyle.
   Source: Official brand spec sheet (see assets/brand-spec-reference.png)
   ============================================================ */

/* --- Webfonts ---
   Hyperwave One is the official brand display + signature script. The .ttf
   lives in fonts/. Caveat Brush is kept as a fallback in case the file is
   removed. Poppins + JetBrains Mono come from Google Fonts.
*/
@font-face {
  font-family: 'Hyperwave One';
  src: url('fonts/hyperwave-one.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Caveat+Brush&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ============================================
     COLORS — Brand palette (from official spec)
     ============================================ */
  --zion-black:       #000000;
  --zion-white:       #FFFFFF;
  --zion-fire:        #F7591F;  /* primary — fire orange */
  --zion-amber:       #F4941C;  /* secondary — heat/amber */

  /* --- Extended fire palette (derived, for UI states) --- */
  --zion-fire-900:    #6B2208;
  --zion-fire-700:    #C8420E;  /* pressed / dark hover */
  --zion-fire-500:    #F7591F;  /* base */
  --zion-fire-300:    #FA8A5F;  /* tints */
  --zion-fire-100:    #FDE3D2;  /* faint washes */

  --zion-amber-700:   #B86A0A;
  --zion-amber-500:   #F4941C;
  --zion-amber-300:   #F8B864;

  /* --- Neutral scale (warm-leaning grays) --- */
  --zion-ink:         #111111;  /* primary text on white */
  --zion-smoke:       #4A4A4A;  /* secondary text */
  --zion-ash:         #8A8A8A;  /* tertiary, captions */
  --zion-bone:        #E5E2DD;  /* dividers */
  --zion-paper:       #F7F5F1;  /* warm off-white surface */

  /* --- Semantic system colors --- */
  --zion-success:     #2D8A4E;
  --zion-warning:     var(--zion-amber);
  --zion-danger:      var(--zion-fire-700);
  --zion-info:        #2E5FB7;

  /* ============================================
     COLORS — Semantic tokens (light theme default)
     ============================================ */
  --bg:               var(--zion-white);
  --bg-elevated:      var(--zion-white);
  --bg-inverse:       var(--zion-black);
  --surface-1:        var(--zion-white);
  --surface-2:        var(--zion-paper);
  --surface-3:        var(--zion-bone);

  --fg1:              var(--zion-black);   /* primary text */
  --fg2:              var(--zion-smoke);   /* secondary */
  --fg3:              var(--zion-ash);     /* tertiary */
  --fg-inverse:       var(--zion-white);
  --fg-brand:         var(--zion-fire);
  --fg-on-fire:       var(--zion-white);

  --border:           var(--zion-bone);
  --border-strong:    var(--zion-black);
  --border-fire:      var(--zion-fire);

  --accent:           var(--zion-fire);
  --accent-hover:     var(--zion-fire-700);
  --accent-press:     var(--zion-fire-900);
  --accent-2:         var(--zion-amber);

  /* ============================================
     TYPE — Families (from brand spec)
     ============================================ */
  /* HYPERWAVE ONE — the "Levi Zion" signature script.
     Use sparingly: hero stamps, hand-tag callouts, signatures.
     Loud, freestyle, one-of-one. NEVER for body. */
  /* SIGNATURE / DISPLAY SCRIPT
     HYPERWAVE ONE — the brand's primary brush display face. Used for ALL
     huge section headers ("COLLECTION", "EVENTS", "STAY LIT", "FIREBALL
     CONTENT"), plus the Levi Zion signature. Loaded from fonts/. */
  --font-script:      'Hyperwave One', 'Caveat Brush', 'Permanent Marker', cursive;

  /* POPPINS — primary brand face. Bold + Medium are the workhorses.
     Geometric, friendly, confident. Used for almost everything. */
  --font-display:     'Poppins', 'Helvetica Neue', 'Arial Black', sans-serif;
  --font-body:        'Poppins', 'Helvetica Neue', system-ui, Arial, sans-serif;

  /* HELVETICA NEUE BOLD — secondary support face.
     Used for editorial headlines, product labels, garment-style copy. */
  --font-helv:        'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Mono — receipts, SKUs, order numbers */
  --font-mono:        'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ============================================
     TYPE — Scale
     ============================================ */
  --fs-hero:          clamp(72px, 14vw, 200px);    /* full-bleed display */
  --fs-display-1:     clamp(56px, 8vw, 120px);
  --fs-display-2:     clamp(40px, 6vw, 80px);
  --fs-h1:            clamp(32px, 4vw, 56px);
  --fs-h2:            clamp(24px, 3vw, 36px);
  --fs-h3:            22px;
  --fs-h4:            18px;
  --fs-body-lg:       18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;
  --fs-micro:         11px;

  --lh-tight:         0.95;
  --lh-snug:          1.1;
  --lh-normal:        1.4;
  --lh-relaxed:       1.6;

  --tracking-wide:    0.08em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.20em;
  --tracking-tight:   -0.02em;
  --tracking-display: -0.015em;

  /* ============================================
     GRADIENTS — Fire-to-ember washes
     The ONE place ZION uses gradients. Reserved for backgrounds,
     hero washes, section dividers. Never on type, never on UI chrome.
     ============================================ */
  --grad-inferno:        linear-gradient(180deg, #FF6B35 0%, #F7591F 30%, #6B2208 70%, #1A0508 100%);
  --grad-inferno-radial: radial-gradient(ellipse at 50% 0%, #FF6B35 0%, #F7591F 25%, #6B2208 60%, #1A0508 100%);
  --grad-sangria:        linear-gradient(180deg, #C0392B 0%, #6B1A14 60%, #080205 100%);
  --grad-ember:          linear-gradient(180deg, #1A0508 0%, #0A0A0A 100%);

  /* ============================================
     SPACING / RADII / SHADOWS / MOTION
     ============================================ */
  --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 — ZION skews sharp. Use small rounding only for chips/pills. */
  --r-none:   0;
  --r-sm:     2px;
  --r-md:     4px;
  --r-lg:     8px;
  --r-pill:   999px;

  /* Shadows — confident, low spread; rare. Most surfaces use hard borders. */
  --shadow-1:    0 1px 0 rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-2:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-3:    0 16px 48px rgba(0,0,0,0.20);
  --shadow-fire: 0 8px 32px rgba(247,89,31,0.35);
  --shadow-hard: 4px 4px 0 0 var(--zion-black);   /* signature offset shadow */

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:   cubic-bezier(0.7, 0, 0.2, 1);
  --dur-quick:   140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* Dark surface — fire on black is a primary ZION mood */
[data-theme="dark"], .on-black {
  --bg:               var(--zion-black);
  --bg-elevated:      #0E0E0E;
  --surface-1:        #0E0E0E;
  --surface-2:        #1A1A1A;
  --surface-3:        #262626;
  --fg1:              var(--zion-white);
  --fg2:              #B8B8B8;
  --fg3:              #7A7A7A;
  --border:           #262626;
  --border-strong:    var(--zion-white);
  --shadow-hard:      4px 4px 0 0 var(--zion-fire);
}

/* ============================================
   SEMANTIC TYPE STYLES — use directly
   ============================================ */

.zion-hero, .t-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-style: italic;             /* fire-trail tilt */
  color: var(--fg1);
}

.zion-display, .t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.t-signature {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-display-2);
  line-height: 1;
  color: var(--fg-brand);
  text-transform: none;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  margin: 0;
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg2);
}

p, .t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
  margin: 0;
}

.t-body-lg {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
}

.t-body-med {
  font-family: var(--font-body);
  font-weight: 500;
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg3);
  letter-spacing: 0.02em;
}

.t-label {
  font-family: var(--font-helv);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.t-quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display-2);
  line-height: var(--lh-snug);
  font-style: italic;
  text-transform: uppercase;
  color: var(--fg-brand);
}

code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* Stamp / sticker — used in hangtags, capsule labels, drop banners */
.t-stamp {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid currentColor;
  padding: 6px 12px 4px;
  display: inline-block;
  transform: rotate(-3deg);
}

/* ============================================================
   ZION — Crinkled plastic / fire-coded surface backgrounds
   ============================================================ */

/* Crinkled black plastic — for primary site background. Uses SVG noise
   + multiple radial sheens to suggest wrinkled patent leather / black plastic. */
.bg-crinkle {
  background-color: #0A0A0A;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(255,255,255,0.05), transparent 35%),
    radial-gradient(ellipse at 80% 40%, rgba(255,255,255,0.04), transparent 40%),
    radial-gradient(ellipse at 30% 80%, rgba(255,255,255,0.035), transparent 45%),
    radial-gradient(ellipse at 70% 90%, rgba(255,255,255,0.03), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-blend-mode: screen, screen, screen, screen, overlay;
}

.bg-fire-grain {
  background-color: #F7591F;
  background-image:
    radial-gradient(ellipse at 25% 30%, rgba(0,0,0,0.18), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0,0,0,0.12), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Inferno gradient backdrop — fire-to-ember vertical wash */
.bg-inferno {
  background: var(--grad-inferno);
  position: relative;
}
.bg-inferno::after {
  /* subtle film grain over the gradient so it doesn't look CGI */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
.bg-sangria { background: var(--grad-sangria); }
.bg-ember   { background: var(--grad-ember); }

/* ============================================================
   BRUSH DISPLAY — the primary section-header treatment
   "COLLECTION" / "EVENTS" / "STAY LIT" etc.
   ============================================================ */
.t-brush {
  font-family: 'Hyperwave One', 'Caveat Brush', cursive;
  font-size: clamp(56px, 10vw, 160px);
  line-height: 0.88;
  letter-spacing: 0.005em;
  color: var(--zion-white);
  text-transform: uppercase;
  display: inline-block;
}
.t-brush-sm { font-size: clamp(28px, 4vw, 56px); line-height: 1; }
.t-brush-md { font-size: clamp(40px, 6vw, 84px); line-height: 0.95; }
.t-brush-xl { font-size: clamp(72px, 14vw, 220px); line-height: 0.85; }

/* Split-color emphasis — use a span with this class inside .t-brush */
.t-brush .accent, .t-brush-accent { color: var(--zion-fire); }

/* Hand-drawn underline beneath script words (small captions) */
.u-brush-underline {
  position: relative;
}
.u-brush-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}