/* ==========================================================================
   JUNGLE STUDIO FITNESS — Colors + Type
   Single source of truth for brand foundations.
   Derived from Jungle_BrandStandards_2026.pdf
   ========================================================================== */

/* ---------- FONT FACES ---------- */

/* Font URLs resolve relative to the CSS file, so `fonts/...` works from any
   nested HTML that imports this file. */
@font-face {
  font-family: "Termina";
  src: url("fonts/Termina-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Termina";
  src: url("fonts/Termina-Demi.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Magnat Head";
  src: url("fonts/MagnatHead-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Queens";
  src: url("fonts/Queens_Variable_Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   1. COLOR TOKENS
   ========================================================================== */

:root {
  /* ---------- Primary ----------
     The brand PDF lists two primaries: Charcoal + White Sand.
     The PDF typo'd the same hex on both rows; "Charcoal" is clearly the
     dark anchor — we've set a true charcoal close to the photographed swatch. */
  --jungle-charcoal: #2B2926;          /* near-black, warm. Body type, ink */
  --jungle-white-sand: #F4EDE0;        /* oat cream. Default canvas */

  /* ---------- Secondary — EARTH palette (warm) ---------- */
  --jungle-copper: #B9562E;            /* saturated terracotta */
  --jungle-terra:  #C98063;            /* muted clay */
  --jungle-sandy:  #D9B99A;            /* soft sand */
  --jungle-loam:   #8C6A4E;            /* mid brown */
  --jungle-beige:  #E7D9C4;            /* warm linen */
  --jungle-tan:    #C3A079;            /* mid tan */

  /* ---------- Seasonal — GREENS ---------- */
  --jungle-dew:     #C9D3B3;           /* pale sage */
  --jungle-fern:    #6F8B5B;           /* mid leaf */
  --jungle-forrest: #2E3D2A;           /* deep evergreen */

  /* ---------- Extra utility neutrals ---------- */
  --jungle-bone:  #FAF6EE;             /* lighter sand for hover/surface */
  --jungle-stone: #8F8578;             /* dusty warm gray */
  --jungle-ash:   #3E3B36;             /* slightly lifted charcoal */

  /* ---------- Semantic surface / ink ---------- */
  --bg:         var(--jungle-white-sand);
  --bg-elev:    var(--jungle-bone);
  --bg-sunken:  var(--jungle-beige);
  --bg-dark:    var(--jungle-charcoal);
  --bg-forrest: var(--jungle-forrest);

  --fg:         var(--jungle-charcoal);
  --fg-muted:   var(--jungle-loam);
  --fg-subtle:  var(--jungle-stone);
  --fg-invert:  var(--jungle-white-sand);
  --fg-accent:  var(--jungle-copper);

  --line:       rgba(43, 41, 38, 0.14);   /* charcoal @ 14% */
  --line-strong:rgba(43, 41, 38, 0.32);
  --line-invert:rgba(244, 237, 224, 0.22);

  /* ---------- Semantic state ---------- */
  --success: var(--jungle-fern);
  --warning: var(--jungle-copper);
  --info:    var(--jungle-loam);

  /* ==========================================================================
     2. TYPE TOKENS
     Families are quoted so CSS parses the space in "Magnat Head".
     ========================================================================== */

  --font-display: "Termina", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Magnat Head", "Cormorant Garamond", "Times New Roman", serif;
  --font-italic:  "Queens", Georgia, serif;
  --font-body:    "Magnat Head", "Cormorant Garamond", "Times New Roman", serif;
  --font-ui:      "Termina", "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  /* Type scale (in rem, 16px base) */
  --fs-xs:   0.6875rem;   /* 11 */
  --fs-sm:   0.8125rem;   /* 13 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.375rem;    /* 22 */
  --fs-xl:   1.75rem;     /* 28 */
  --fs-2xl:  2.25rem;     /* 36 */
  --fs-3xl:  3rem;        /* 48 */
  --fs-4xl:  4.25rem;     /* 68 */
  --fs-5xl:  6rem;        /* 96 */

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.35;
  --lh-relaxed: 1.55;

  /* Per brand: Termina tracks wide (60 units Adobe ≈ 0.06em).
     Magnat Head + Queens tracking 0. */
  --tr-wide:   0.08em;
  --tr-normal: 0;
  --tr-tight: -0.01em;

  /* ==========================================================================
     3. SHAPE / SPACING
     ========================================================================== */

  --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;

  /* The brand arch/tunnel is rounded-top. We use a large top radius
     for "arch" surfaces, small radius for cards, zero for pure ink. */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 16px;
  --r-pill: 999px;
  --r-arch: 9999px 9999px 0 0;  /* semi-circular top */

  /* Shadows — soft, warm, never blue-black */
  --shadow-sm: 0 1px 2px rgba(43, 41, 38, 0.08);
  --shadow-md: 0 6px 20px rgba(43, 41, 38, 0.10);
  --shadow-lg: 0 24px 60px -12px rgba(43, 41, 38, 0.22);
  --shadow-inset: inset 0 0 0 1px rgba(43, 41, 38, 0.10);
}


/* ==========================================================================
   4. SEMANTIC TYPOGRAPHY CLASSES
   Use these on elements directly or map in your component CSS.
   ========================================================================== */

.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-display {
  /* "THE GLOW RISES" vibe — all caps, wide tracking, wordmark-like */
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

.t-h1 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

.t-h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

.t-h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

.t-subhead {
  /* "We're so glad your here!" — Queens italic */
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 200;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-normal);
  color: var(--fg-muted);
}

.t-lede {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tr-normal);
  color: var(--fg);
}

.t-body {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tr-normal);
  color: var(--fg);
}

.t-small {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg);
}

.t-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 200;
}


/* ==========================================================================
   5. BASE / RESET HELPERS
   Opt-in — apply `class="jungle-base"` on a root to inherit typography.
   ========================================================================== */

.jungle-base {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.jungle-base h1, .jungle-base h2, .jungle-base h3,
.jungle-base h4, .jungle-base h5, .jungle-base h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  margin: 0;
}

.jungle-base h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.jungle-base h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
.jungle-base h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
.jungle-base h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }

.jungle-base p { margin: 0 0 1em; max-width: 62ch; }

.jungle-base a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
}
.jungle-base a:hover { color: var(--fg-accent); }


/* ==========================================================================
   6. ARCH — the brand's signature shape
   Use .jungle-arch on any box to make the top an arch.
   ========================================================================== */

.jungle-arch {
  border-radius: var(--r-arch);
  overflow: hidden;
}