/* =============================================================================
   TYPOGRAPHY.CSS
   -----------------------------------------------------------------------------
   Reproduces the source's *fluid* typography: instead of media-query steps,
   every size is a single calc() that interpolates between a fixed px value and
   a viewport-relative value, governed by --scale-modifier and
   --target-window-width (set per breakpoint in responsive.css).

   Formula (from the original build):
     size = Npx - Npx*m + 100vw * N / W * m
   where N = reference px, m = --scale-modifier (0..1), W = --target-window-width
     m = 0  -> exactly Npx (locked)
     m = 1  -> purely fluid (N/W of the viewport)
   The source uses ~0.2 on mobile and ~0.6 on wide screens, so type grows gently
   with the viewport but never runs away.
   ========================================================================== */

/* --- @font-face ---------------------------------------------------------------
   Sora (editorial geometric sans) + JetBrains Mono (technical labels). Both are
   VARIABLE fonts served as a single file per subset, so the whole weight range
   costs one request. Keep the family names in sync with --font-sans /
   --font-mono in tokens.css.

   The .woff2 files live in the CONSUMING page's assets (../../assets/fonts/),
   not inside the design system — the DS stays brand-neutral and shippable
   without licensing anyone else's type. See README "Re-brand in 3 steps".
   Both families are SIL Open Font License 1.1.
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: "Sora";
  src: url("../../assets/fonts/sora-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  src: url("../../assets/fonts/sora-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../../assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fluid size helper: fs(N) -> calc(...) */
:root {
  --fluid-12: calc(12px - 12px*var(--scale-modifier) + 100vw*12/var(--target-window-width)*var(--scale-modifier));
  --fluid-14: calc(14px - 14px*var(--scale-modifier) + 100vw*14/var(--target-window-width)*var(--scale-modifier));
  --fluid-16: calc(16px - 16px*var(--scale-modifier) + 100vw*16/var(--target-window-width)*var(--scale-modifier));
  --fluid-20: calc(20px - 20px*var(--scale-modifier) + 100vw*20/var(--target-window-width)*var(--scale-modifier));
  --fluid-22: calc(22px - 22px*var(--scale-modifier) + 100vw*22/var(--target-window-width)*var(--scale-modifier));
  --fluid-24: calc(24px - 24px*var(--scale-modifier) + 100vw*24/var(--target-window-width)*var(--scale-modifier));
  --fluid-28: calc(28px - 28px*var(--scale-modifier) + 100vw*28/var(--target-window-width)*var(--scale-modifier));
  --fluid-32: calc(32px - 32px*var(--scale-modifier) + 100vw*32/var(--target-window-width)*var(--scale-modifier));
  --fluid-40: calc(40px - 40px*var(--scale-modifier) + 100vw*40/var(--target-window-width)*var(--scale-modifier));
  --fluid-48: calc(48px - 48px*var(--scale-modifier) + 100vw*48/var(--target-window-width)*var(--scale-modifier));
  --fluid-56: calc(56px - 56px*var(--scale-modifier) + 100vw*56/var(--target-window-width)*var(--scale-modifier));
  --fluid-64: calc(64px - 64px*var(--scale-modifier) + 100vw*64/var(--target-window-width)*var(--scale-modifier));
  --fluid-88: calc(88px - 88px*var(--scale-modifier) + 100vw*88/var(--target-window-width)*var(--scale-modifier));
}

/* -----------------------------------------------------------------------------
   Heading component  <h_ class="ds-heading" data-variant="heading-1|2|3"
                                            data-weight="weak">
   The source pairs large sizes with LIGHT weight ("weak") for an airy,
   editorial display look.
   ----------------------------------------------------------------------------- */
.ds-heading {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--text-strong);
  text-wrap: balance;
}
.ds-heading[data-weight="weak"] { font-weight: var(--weight-light); }

.ds-heading[data-variant="heading-1"] {
  font-size: var(--fluid-88);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
}
.ds-heading[data-variant="heading-2"] {
  font-size: var(--fluid-56);
  line-height: var(--lh-tight);
}
.ds-heading[data-variant="heading-3"] {
  font-size: var(--fluid-40);
  line-height: var(--lh-heading);
}

/* -----------------------------------------------------------------------------
   Body component  <p class="ds-body" data-variant="large|base|small">
   ----------------------------------------------------------------------------- */
.ds-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-book);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}
.ds-body[data-variant="large"] { font-size: var(--fluid-24); line-height: var(--lh-snug); }
.ds-body[data-variant="base"]  { font-size: var(--fluid-16); }
.ds-body[data-variant="small"] { font-size: var(--fluid-14); }

/* -----------------------------------------------------------------------------
   Mono / eyebrow / label  <span class="ds-mono" data-variant="tiny-mono">
   Uppercase technical labels — section eyebrows, tags, metadata.
   ----------------------------------------------------------------------------- */
.ds-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-normal);
  font-size: var(--fluid-12);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.ds-mono[data-variant="tiny"] { font-size: var(--fluid-12); letter-spacing: var(--ls-mono-tight); }

/* -----------------------------------------------------------------------------
   Utility text roles
   ----------------------------------------------------------------------------- */
.ds-text-strong { color: var(--text-strong); }
.ds-text-muted  { color: var(--text-muted); }
.ds-text-accent { color: var(--brand-accent); }
.ds-uppercase   { text-transform: uppercase; }
.ds-balance     { text-wrap: balance; }

/* -----------------------------------------------------------------------------
   .ds-em — the ONE or TWO key words of a heading, filled with gold.
   <h2 class="ds-heading">Identifique as <span class="ds-em">melhores
   oportunidades</span> rapidamente.</h2>

   Static by design: an animated sweep on every section turns a highlight into
   wallpaper. Survives the word-splitter in script.js, which re-applies the
   class to each word it produces.
   ----------------------------------------------------------------------------- */
.ds-em {
  background-image: var(--gradient-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fill each word independently so short words still show the whole ramp
     instead of a single flat slice of it. */
  background-size: 100% 100%;
}
/* Older engines paint transparent text as invisible text, not as a fallback —
   so give them a flat gold instead. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ds-em { background-image: none; color: var(--color-coral-400); }
}

/* Gradient / shimmer text — animated in animations.css via .is-shimmer */
.ds-text-gradient {
  background: var(--gradient-text-shimmer);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}