/* =======================================================================
   Vem do Leta — Colors & Type
   =======================================================================
   Projeto Fernanda Serraglia / PROJETO VD — financial education for
   Brazilians abroad. Palette is forest-green + gold metallic on near-black,
   evoking abundance, a compass/navigational journey, and the
   "moeda forte" (strong currency) promise.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Cinzel:wght@500;600;700&family=Anton&display=swap');

:root {
  /* -------- Brand palette -------- */
  /* Backgrounds: black → deep green gradient base */
  --vdl-black:        #000000;
  --vdl-ink:          #050a06;    /* default page bg */
  --vdl-ink-2:        #0a1309;    /* panel bg one step up */
  --vdl-ink-3:        #0f1a10;    /* elevated surface */

  /* Forest greens — dark surfaces, headers, gradients */
  --vdl-forest-900:   #05200f;
  --vdl-forest-800:   #0a3118;
  --vdl-forest-700:   #0f4520;
  --vdl-forest-600:   #145c2a;

  /* Brand green — the workhorse. Button fills, pills, chips. */
  --vdl-green-600:    #157a36;    /* primary button bg */
  --vdl-green-500:    #1d9444;    /* hover / lighter surfaces */
  --vdl-green-400:    #2bb356;    /* active / emphasis */

  /* Emerald accent — highlighted words, success, CTAs light-on-dark */
  --vdl-emerald:      #2ee56a;    /* "BRASILEIROS", "EXTERIOR" highlight */
  --vdl-emerald-soft: #6ff09a;    /* glow halo tint */

  /* Gold — logo, premium accent, metallic headlines */
  --vdl-gold-900:     #6b4a14;
  --vdl-gold-700:     #a67a28;
  --vdl-gold-500:     #d4a24a;    /* primary gold — compass, borders */
  --vdl-gold-300:     #f4c55b;    /* headline metallic lights */
  --vdl-gold-100:     #fff1c4;    /* metallic highlight tip */

  /* Neutrals — text on dark */
  --vdl-fg-1:         #ffffff;    /* primary text on dark */
  --vdl-fg-2:         #e8ebe4;    /* body */
  --vdl-fg-3:         #b7beb2;    /* secondary */
  --vdl-fg-4:         #7b8378;    /* tertiary / disclaimers */
  --vdl-hairline:     rgba(255,255,255,0.08);
  --vdl-hairline-2:   rgba(255,255,255,0.14);

  /* Inverse (rare — used in inputs on dark bg) */
  --vdl-surface-white: #ffffff;
  --vdl-surface-white-ink: #0a1309;

  /* Semantic */
  --vdl-success:      var(--vdl-emerald);
  --vdl-warning:      var(--vdl-gold-300);
  --vdl-danger:       #e24b3b;
  --vdl-info:         #5db1ff;

  /* -------- Signature gradients -------- */
  --vdl-grad-bg:       radial-gradient(ellipse at 50% 20%, #0d2714 0%, #030806 55%, #000 100%);
  --vdl-grad-green-cta: linear-gradient(180deg, #1f9a44 0%, #157a36 100%);
  --vdl-grad-gold:     linear-gradient(180deg, #fff1c4 0%, #f4c55b 35%, #d4a24a 60%, #8a6220 100%);
  --vdl-grad-gold-text: linear-gradient(180deg, #fff1c4 0%, #f4c55b 40%, #a67a28 100%);
  --vdl-grad-emerald-glow: radial-gradient(ellipse at center, rgba(46,229,106,0.35) 0%, rgba(46,229,106,0) 70%);
  --vdl-grad-forest-hero: linear-gradient(180deg, #0a3118 0%, #030806 100%);

  /* -------- Shadows & glows -------- */
  --vdl-shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --vdl-shadow-md:    0 8px 24px rgba(0,0,0,0.5);
  --vdl-shadow-lg:    0 24px 60px rgba(0,0,0,0.65);
  --vdl-glow-green:   0 0 32px rgba(46,229,106,0.35), 0 0 8px rgba(46,229,106,0.5);
  --vdl-glow-gold:    0 0 28px rgba(212,162,74,0.45), 0 2px 0 rgba(107,74,20,0.8);
  --vdl-inner-border: inset 0 0 0 1px rgba(255,255,255,0.08);

  /* -------- Radii -------- */
  --vdl-radius-xs:    4px;
  --vdl-radius-sm:    8px;
  --vdl-radius-md:    12px;
  --vdl-radius-lg:    18px;
  --vdl-radius-xl:    28px;
  --vdl-radius-pill:  999px;

  /* -------- Spacing -------- */
  --vdl-space-1:      4px;
  --vdl-space-2:      8px;
  --vdl-space-3:      12px;
  --vdl-space-4:      16px;
  --vdl-space-5:      24px;
  --vdl-space-6:      32px;
  --vdl-space-7:      48px;
  --vdl-space-8:      64px;
  --vdl-space-9:      96px;

  /* -------- Type families -------- */
  /* Inter — body/UI workhorse (Google Fonts proxy for an "Avenir/Montserrat"-ish capture page sans) */
  --vdl-font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Anton — tall bold display for thumbnail-style headlines (closest free match to the condensed caps used in YouTube aulas) */
  --vdl-font-display: 'Anton', 'Bebas Neue', 'Oswald', Impact, sans-serif;
  /* Cinzel — roman-capitals serif used in the "JORNADA DO INVESTIDOR" compass logo lockup */
  --vdl-font-serif:   'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
  /* Mono — data, tickers */
  --vdl-font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* -------- Type scale -------- */
  --vdl-text-xs:     12px;
  --vdl-text-sm:     14px;
  --vdl-text-base:   16px;
  --vdl-text-md:     18px;
  --vdl-text-lg:     22px;
  --vdl-text-xl:     28px;
  --vdl-text-2xl:    36px;
  --vdl-text-3xl:    48px;
  --vdl-text-4xl:    64px;
  --vdl-text-5xl:    88px;
  --vdl-text-6xl:    120px;
}

/* =======================================================================
   Semantic element styles — opt in via the `vdl` class on a root element
   ======================================================================= */

.vdl {
  font-family: var(--vdl-font-sans);
  color: var(--vdl-fg-2);
  background: var(--vdl-ink);
  font-size: var(--vdl-text-base);
  line-height: 1.55;
}

.vdl h1, .vdl .h1 {
  font-family: var(--vdl-font-display);
  font-weight: 400;        /* Anton is one-weight */
  font-size: clamp(40px, 6vw, var(--vdl-text-5xl));
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--vdl-fg-1);
}

.vdl h2, .vdl .h2 {
  font-family: var(--vdl-font-sans);
  font-weight: 800;
  font-size: clamp(28px, 3.5vw, var(--vdl-text-2xl));
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--vdl-fg-1);
}

.vdl h3, .vdl .h3 {
  font-family: var(--vdl-font-sans);
  font-weight: 700;
  font-size: var(--vdl-text-xl);
  line-height: 1.2;
  color: var(--vdl-fg-1);
}

.vdl h4, .vdl .h4 {
  font-family: var(--vdl-font-sans);
  font-weight: 700;
  font-size: var(--vdl-text-lg);
  line-height: 1.25;
  color: var(--vdl-fg-1);
}

.vdl p, .vdl .body {
  font-family: var(--vdl-font-sans);
  font-size: var(--vdl-text-base);
  line-height: 1.6;
  color: var(--vdl-fg-2);
}

.vdl .lead {
  font-size: var(--vdl-text-md);
  line-height: 1.5;
  font-weight: 500;
  color: var(--vdl-fg-1);
}

.vdl .eyebrow {
  font-family: var(--vdl-font-sans);
  font-weight: 700;
  font-size: var(--vdl-text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vdl-emerald);
}

.vdl .disclaimer {
  font-family: var(--vdl-font-sans);
  font-size: var(--vdl-text-xs);
  color: var(--vdl-fg-4);
  line-height: 1.5;
}

.vdl .serif-mark {
  font-family: var(--vdl-font-serif);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--vdl-gold-500);
}

/* -------- Signature text effects -------- */

.vdl .text-emerald { color: var(--vdl-emerald); }
.vdl .text-gold    { color: var(--vdl-gold-500); }

/* Metallic gold headline (used on thumbnails like "CHECKLIST") */
.vdl .text-gold-metal {
  background: var(--vdl-grad-gold-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
  filter: drop-shadow(0 2px 0 rgba(107,74,20,0.6));
}

/* Emerald highlighted word (used inline in headlines) */
.vdl .highlight-emerald {
  color: var(--vdl-emerald);
  text-shadow: 0 0 18px rgba(46,229,106,0.4);
}