/* ============================================================
   THAINÁ MARCON — Design Tokens
   Extraído do Figma: kTDWPCPpBODQojHe2teOoB (node 3-2)
   ============================================================ */

:root {

  /* ── CORES ─────────────────────────────────────────────── */

  --color-navy:        #192437;   /* dark backgrounds, primary CTAs */
  --color-navy-md:     #2e4060;   /* testimonial badge, hover */
  --color-navy-dark:   #1a2744;   /* subtle text tint */
  --color-cream:       #f5f0e8;   /* main page background */
  --color-cream-md:    #ede6d8;   /* section alt background */
  --color-border:      #d9cdb8;   /* dividers, card borders */
  --color-gold:        #9b896b;   /* accent, eyebrows, stars, CTA (depoimentos) */
  --color-gold-light:  #b8a58a;   /* quote emphasis */
  --color-brown:       #5a4f3f;   /* body text on light backgrounds */
  --color-beige:       #c8bea8;   /* secondary text on dark backgrounds */
  --color-white-07:    rgba(255,255,255,0.07);  /* FAQ dividers */
  --color-white-04:    rgba(255,255,255,0.04);  /* testimonial card overlay */
  --color-overlay-nav: rgba(255,255,255,0.2);  /* navbar background */

  /* ── TIPOGRAFIA ─────────────────────────────────────────── */

  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;

  /* Font-size scale (mobile-first, converted from Figma px at 1920-canvas) */
  --fs-eyebrow:   14px;   /* 11.2px */
  --fs-body-sm:   13.1px;
  --fs-body:      14.4px;
  --fs-body-md:   15.2px;
  --fs-body-lg:   15px;
  --fs-body-xl:   17.6px;
  --fs-card-sub:  13.6px;
  --fs-team-role: 10.4px;
  --fs-card-h:    22px;
  --fs-team-h:    20.8px;
  --fs-modal-h:   24px;
  --fs-step-num:  23px;
  --fs-faq-q:     15.2px;
  --fs-section-h: 41.6px;
  --fs-hero-h:    57.6px;
  --fs-quote:     44.8px;
  --fs-cta-h:     51.2px;

  /* Letter-spacing */
  --ls-eyebrow:   2px;
  --ls-stars:     2px;

  /* Line-height */
  --lh-serif:     1.10;
  --lh-body:      1.70;
  --lh-tight:     1.30;

  /* ── ESPAÇAMENTOS ───────────────────────────────────────── */

  --section-pt:   64px;   /* top/bottom padding for most sections (mobile) */

  /* ── RAIOS ──────────────────────────────────────────────── */

  --radius-card:  20px;
  --radius-btn:   100px;
  --radius-badge: 20px;

  /* ── BORDAS ─────────────────────────────────────────────── */

  --border-card:  1px solid var(--color-border);

  /* ── CONTAINER ──────────────────────────────────────────── */

  --container-max: 1080px;
  --container-px:  24px;
}

/* ── RESPONSIVO: tokens compartilhados por várias seções ──── */
/* (ajustes de uma seção só ficam junto da própria seção em main.css;
   este token é exceção porque o mesmo valor é reusado em 6 seções) */

@media (min-width: 768px) {
  :root {
    --section-pt: 80px;
  }
}

@media (min-width: 992px) {
  :root {
    --section-pt: 104px;
  }
}