/* =========================================================
   JUNGLE 8 · FOUNDATION TOKENS
   Source of truth: L8-J8 Brand Guidelines (AIXV Agency, 2026)
   - Primary pink: #EC9BFF (lavender-pink, "neon lights")
   - Dark: #0F0D0D
   - White: #FFF
   - Vibe: Vietnamese street food + leafy oasis + after-hours neon
   ========================================================= */

/* ---------- FONT FACES (Druk family, brand-sanctioned) ---------- */
@font-face {
  font-family: 'Druk';
  src: url('../assets/fonts/Druk-Super.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Druk';
  src: url('../assets/fonts/Druk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Druk';
  src: url('../assets/fonts/Druk-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Druk XCond';
  src: url('../assets/fonts/Druk-XCondSuper.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLOR · CORE (brand-sanctioned exact) ---------- */
  --j8-pink-500: #EC9BFF;       /* Primary — exact brand */
  --j8-black-900: #0F0D0D;      /* Brand dark */
  --j8-white: #FFFFFF;

  /* ---------- COLOR · DERIVED SCALE ---------- */
  /* Pink scale (HSL: 285° 100% 80%) — 5 stops for layering */
  --j8-pink-100: #FCE5FF;       /* faintest tint — bg wash */
  --j8-pink-200: #F7C7FF;       /* hover lift */
  --j8-pink-300: #F1B0FF;       /* secondary text on dark */
  --j8-pink-400: #EFA5FF;       /* brand mid */
  --j8-pink-500: #EC9BFF;       /* PRIMARY (brand exact) */
  --j8-pink-600: #D87FF0;       /* pressed / strong */
  --j8-pink-700: #B85DD3;       /* deep magenta accent */
  --j8-pink-800: #7A2E96;       /* darker shadow tint */
  --j8-pink-900: #3F1052;       /* aubergine — deep tinted bg */

  /* Dark scale — 6 surface depths (Linear-style layering) */
  --j8-bg-0: #060304;           /* page bg — almost-black with violet undertone */
  --j8-bg-1: #0F0A0D;           /* base surface (≈ brand black) */
  --j8-bg-2: #181216;           /* raised card */
  --j8-bg-3: #221820;           /* hover / popover */
  --j8-bg-4: #2D2029;           /* selected / border-strong */
  --j8-bg-5: #3A2935;           /* divider on raised */

  /* Border with subtle pink tint */
  --j8-border-subtle: rgba(236, 155, 255, 0.08);
  --j8-border-soft:   rgba(236, 155, 255, 0.16);
  --j8-border-strong: rgba(236, 155, 255, 0.32);
  --j8-border-neon:   rgba(236, 155, 255, 0.65);

  /* Text on dark */
  --j8-text-primary:    #F5EAF1;   /* warm off-white */
  --j8-text-secondary:  #C9B7C3;   /* dusty rose-mute */
  --j8-text-tertiary:   #8A7884;
  --j8-text-quaternary: #5C4D56;
  --j8-text-on-pink:    #1A0820;   /* deep aubergine on pink bg */

  /* Accent (sparingly: Vietnamese street food = warm yellow lamp) */
  --j8-amber-400: #FFC857;        /* warm street-lamp warm — secondary accent */
  --j8-jade-400:  #5AD1A8;        /* leafy oasis — tertiary accent (sparingly) */

  /* Semantic */
  --j8-success: var(--j8-jade-400);
  --j8-warning: var(--j8-amber-400);
  --j8-danger:  #FF6B7A;

  /* ---------- TYPOGRAPHY ---------- */
  --j8-font-display: 'Druk', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --j8-font-display-x: 'Druk XCond', 'Druk', 'Bebas Neue', sans-serif;
  --j8-font-body: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --j8-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale — modular ratio 1.333 (Augmented Fourth) on 16px */
  --j8-text-2xs:  11px;
  --j8-text-xs:   13px;
  --j8-text-sm:   14px;
  --j8-text-base: 16px;
  --j8-text-md:   18px;
  --j8-text-lg:   22px;
  --j8-text-xl:   28px;
  --j8-text-2xl:  36px;
  --j8-text-3xl:  48px;
  --j8-text-4xl:  64px;
  --j8-text-5xl:  88px;
  --j8-text-6xl:  120px;
  --j8-text-7xl:  168px;
  --j8-text-8xl:  220px;   /* hero wordmark */

  /* Line heights — tuned per scale */
  --j8-leading-tight:   0.92;   /* display */
  --j8-leading-snug:    1.08;
  --j8-leading-normal:  1.5;    /* body */
  --j8-leading-relaxed: 1.7;

  /* Letter spacing — body baseline bumped to 0.012em for readability
     Display headlines loosened iter4: Druk caps need breathing room.
     Previously tight=-0.02 / tightest=-0.04 was crushing "ELLIOTT STABLES." etc. */
  --j8-tracking-tightest: -0.015em;   /* was -0.04em — display poster still tightened, no longer crushing */
  --j8-tracking-tight:    -0.002em;   /* was -0.02em — near-neutral; Druk drawn tight already */
  --j8-tracking-normal:   0.012em;     /* body default — was 0, now breath */
  --j8-tracking-body:     0.012em;     /* alias */
  --j8-tracking-airy:     0.025em;     /* small body, secondary text */
  --j8-tracking-wide:     0.06em;      /* was 0.04em */
  --j8-tracking-wider:    0.14em;      /* was 0.12em */
  --j8-tracking-widest:   0.28em;      /* was 0.25em */

  /* Weights */
  --j8-weight-regular: 400;
  --j8-weight-medium:  500;
  --j8-weight-bold:    700;
  --j8-weight-black:   900;

  /* ---------- SPACE (8px base) ---------- */
  --j8-space-0: 0;
  --j8-space-1: 4px;
  --j8-space-2: 8px;
  --j8-space-3: 12px;
  --j8-space-4: 16px;
  --j8-space-5: 24px;
  --j8-space-6: 32px;
  --j8-space-7: 48px;
  --j8-space-8: 64px;
  --j8-space-9: 96px;
  --j8-space-10: 128px;
  --j8-space-11: 160px;
  --j8-space-12: 200px;

  /* ---------- RADIUS ---------- */
  --j8-radius-0: 0;
  --j8-radius-xs: 4px;
  --j8-radius-sm: 8px;
  --j8-radius-md: 14px;
  --j8-radius-lg: 22px;
  --j8-radius-xl: 32px;
  --j8-radius-pill: 999px;        /* logo pill, badges */

  /* ---------- SHADOW · pink-tinted, never default grey ---------- */
  --j8-shadow-sm:  0 1px 2px rgba(15, 5, 18, 0.6);
  --j8-shadow-md:  0 6px 18px rgba(15, 5, 18, 0.55), 0 1px 2px rgba(236, 155, 255, 0.08);
  --j8-shadow-lg:  0 18px 48px rgba(15, 5, 18, 0.7), 0 2px 6px rgba(236, 155, 255, 0.12);
  --j8-shadow-xl:  0 40px 80px rgba(15, 5, 18, 0.8), 0 4px 12px rgba(236, 155, 255, 0.18);

  /* ---------- GLOW · neon (the brand signature) ---------- */
  --j8-glow-sm:  0 0 8px rgba(236, 155, 255, 0.45);
  --j8-glow-md:  0 0 24px rgba(236, 155, 255, 0.55), 0 0 4px rgba(236, 155, 255, 0.9);
  --j8-glow-lg:  0 0 48px rgba(236, 155, 255, 0.6), 0 0 12px rgba(236, 155, 255, 0.85), 0 0 2px #fff;
  --j8-glow-text: 0 0 14px rgba(236, 155, 255, 0.55), 0 0 30px rgba(236, 155, 255, 0.3);
  --j8-glow-text-strong: 0 0 8px #fff, 0 0 22px rgba(236, 155, 255, 0.85), 0 0 60px rgba(236, 155, 255, 0.55);

  /* ---------- MOTION ---------- */
  --j8-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --j8-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --j8-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --j8-duration-fast:   120ms;
  --j8-duration-base:   180ms;
  --j8-duration-slow:   320ms;
  --j8-duration-marquee: 38s;

  /* ---------- LAYOUT ---------- */
  --j8-container-sm:  640px;
  --j8-container-md:  768px;
  --j8-container-lg:  1024px;
  --j8-container-xl:  1240px;
  --j8-container-2xl: 1440px;

  --j8-nav-height: 72px;
}