/* ===============================================
    ⭐ Font Import - Plus Jakarta Sans (300–800)
=============================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ===============================================
    ⭐ Font Family Tokens por tipo de texto
=============================================== */
:root
{
  --font-headline: "Plus Jakarta Sans", sans-serif;
  --font-subheadline: "Plus Jakarta Sans", sans-serif;
  --font-title: "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-captions: "Plus Jakarta Sans", sans-serif;

  --lh-headline: 130%;
  --lh-body: 150%;

  --tt-caps: uppercase;

  --ls-title: 0.125rem;
  --ls-title-s: 0.0625rem;

  --fs-h1: 6rem;
  --fs-h2: 4.5rem;
  --fs-h3: 4rem;
  --fs-h4: 3.5rem;
  --fs-h5: 3rem;
  --fs-h6: 2.25rem;
  --fs-h7: 1.5rem;
  --fs-h8: 1.25rem;

  --fs-sub-l: 1.75rem;
  --fs-sub: 1.5rem;

  --fs-title: 1.25rem;
  --fs-title-s: 0.875rem;

  --fs-body-xl: 1.25rem;
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-body-s: 0.875rem;
  --fs-body-xs: 0.75rem;

  --fs-captions: 0.625rem;
  --fs-captions-s: 0.5rem;

  --margin-right: 0.25em
}

/* ===============================================
    ⭐ Global Base
=============================================== */
html, body
{
  font-size: 100% !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
}

/* ===============================================
    ⭐ Headline
=============================================== */
[class^="headline"], [class*=" headline"]
{
  font-family: var(--font-headline) !important;
  line-height: var(--lh-headline) !important;
}

.headline-1 { font-size: var(--fs-h1) !important; }
.headline-2 { font-size: var(--fs-h2) !important; }
.headline-3 { font-size: var(--fs-h3) !important; }
.headline-4 { font-size: var(--fs-h4) !important; }
.headline-5 { font-size: var(--fs-h5) !important; }
.headline-6 { font-size: var(--fs-h6) !important; }
.headline-7 { font-size: var(--fs-h7) !important; }
.headline-8 { font-size: var(--fs-h8) !important; }

/* ===============================================
    ⭐ Subheadline
=============================================== */
[class^="subheadline"], [class*=" subheadline"]
{
  font-family: var(--font-subheadline) !important;
  line-height: var(--lh-headline) !important;
}

.subheadline-l { font-size: var(--fs-sub-l) !important; }
.subheadline { font-size: var(--fs-sub) !important; }

/* ===============================================
    ⭐ Title Caps
=============================================== */
[class^="title-caps"], [class*=" title-caps"]
{
  font-family: var(--font-title) !important;
  text-transform: var(--tt-caps) !important;
}

.title-caps
{
  font-size: var(--fs-title) !important;
  letter-spacing: var(--ls-title) !important;
}

.title-caps-s
{
  font-size: var(--fs-title-s) !important;
  letter-spacing: var(--ls-title-s) !important;
}

/* ===============================================
    ⭐ Body
=============================================== */
[class^="body"], [class*=" body"]
{
  font-family: var(--font-body) !important;
}

.body-xl { font-size: var(--fs-body-xl) !important; }
.body-l { font-size: var(--fs-body-l) !important; }
.body { font-size: var(--fs-body) !important; }
.body-s { font-size: var(--fs-body-s) !important; }
.body-xs { font-size: var(--fs-body-xs) !important; }

/* ===============================================
    ⭐ Captions
=============================================== */
[class^="captions"], [class*=" captions"]
{
  font-family: var(--font-captions) !important;
}

.captions { font-size: var(--fs-captions) !important; }
.captions-s { font-size: var(--fs-captions-s) !important; }

/* ===============================================
    ⭐ Peso automático por data-weight
=============================================== */
[class*="headline"][data-weight="bold"] { font-weight: 800 !important; }
[class*="subheadline"][data-weight="bold"] { font-weight: 700 !important; }
[class*="title-caps"][data-weight="bold"] { font-weight: 700 !important; }
[class*="body"][data-weight="bold"] { font-weight: 600 !important; }
[class*="captions"][data-weight="bold"] { font-weight: 600 !important; }

/* ===============================================
    ⭐ Inline Behavior (Manual Control por data-inline)
=============================================== */
/*
[class*="headline"][data-inline],
[class*="subheadline"][data-inline],
[class*="title-caps"][data-inline],
[class*="body"][data-inline],
[class*="captions"][data-inline]
{
  display: inline-block !important;
  margin-right: var(--margin-right) !important;
}
*/