/* ============================================================
   INSTITUTO RAIZ — Design Tokens
   Derivado de DESIGN_DNA.json (referência: sammiemancine.com)
   Gerado por: DS Builder · Pipeline Landing Page Premium
   Data: 2026-07-05
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   FONTE: mapeamento freight-display-pro → Google Fonts livres
   freight-display-pro (Typekit, peso 300, elegância editorial)
     → Cormorant Garamond 300/300i — caráter idêntico: thin
        serifs, alturas de caixa longas, elegância tipográfica
   work-sans (Typekit label font)
     → Work Sans — disponível Google Fonts, substitução direta
   Montserrat — já Google Fonts, sem substituição necessária
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Montserrat:wght@100;200;300;400;500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root {

  /* ──────────────────────────────────────────────
     CORES — Paleta earthy do DNA
     Nomeadas semanticamente (natureza = intenção)
  ────────────────────────────────────────────── */

  /* Backgrounds primários */
  --color-pearl:        #f4efe9;   /* fundo principal — creme quente */
  --color-near-white:   #f6f8fa;   /* variante clara — cards */
  --color-pure-white:   #ffffff;   /* texto em escuro / preenchimento card */

  /* Backgrounds de seção — zoneamento cromático */
  --color-eucalyptus:   #c0bfa3;   /* seção mid-tone — sage/khaki */
  --color-golden-sand:  #dec4a1;   /* seção quente — caramelo/areia */
  --color-terracotta:   #ccad98;   /* seção intimista — barro/blush */
  --color-wheat-grass:  #827a5d;   /* seção escura quente — oliva */
  --color-vine:         #35331f;   /* seção dark — oliva floresta profundo */

  /* Texto */
  --color-charcoal:     #383838;   /* texto primário + CTA + UI escuro */
  --color-mid-gray:     #6e7073;   /* corpo de texto desfocado / secundário */

  /* Acentos */
  --color-puddy:        #ceb49f;   /* blush-bege — acento secundário suave */
  --color-slate-teal:   #546769;   /* hover / acento — cinza-teal atenuado */
  --color-muted-sage:   #7f948f;   /* subtítulo / texto em seções escuras */
  --color-rust-cta:     #e44c2e;   /* ferrugem quente — acento terciário/alert */

  /* Derivadas funcionais */
  --color-surface:       var(--color-pearl);
  --color-surface-alt:   var(--color-near-white);
  --color-text-primary:  var(--color-charcoal);
  --color-text-secondary:var(--color-mid-gray);
  --color-text-inverse:  var(--color-pure-white);
  --color-text-muted:    var(--color-muted-sage);
  --color-accent:        var(--color-slate-teal);
  --color-cta-primary:   var(--color-charcoal);
  --color-cta-text:      var(--color-pure-white);
  --color-border-subtle: rgba(56, 56, 56, 0.10);   /* charcoal 10% */
  --color-border-mid:    rgba(56, 56, 56, 0.20);   /* charcoal 20% */
  --color-overlay-dark:  rgba(56, 56, 56, 0.55);   /* overlay CTA bg */
  --color-overlay-hero:  rgba(56, 56, 56, 0.35);   /* overlay hero */

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

  /* Famílias */
  --font-display:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:     'Montserrat', system-ui, -apple-system, sans-serif;
  --font-label:    'Work Sans', system-ui, -apple-system, sans-serif;

  /* Base */
  --font-size-base:  1rem;          /* 16px */
  --font-base-px:    16;            /* referência numérica pra cálculo */

  /* Escala de tamanho */
  --text-xxs:  0.625rem;    /* 10px */
  --text-xs:   0.75rem;     /* 12px  — H6 labels */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px  — body, H5 */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.25rem;     /* 20px  — H4 */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  2rem;        /* 32px  — H3 desktop */
  --text-3xl:  2.5rem;      /* 40px */
  --text-4xl:  3rem;        /* 48px  — H2 desktop / H1 mobile */
  --text-5xl:  4rem;        /* 64px  — H1 desktop */

  /* Pesos */
  --fw-thin:      100;
  --fw-light:     300;   /* display principal */
  --fw-regular:   400;
  --fw-medium:    500;   /* labels */
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Line-height */
  --lh-tight:    1.0;   /* H1 display */
  --lh-snug:     1.2;   /* H2–H3, labels */
  --lh-normal:   1.5;   /* H5, UI */
  --lh-relaxed:  1.6;   /* body */
  --lh-loose:    1.8;

  /* Letter-spacing */
  --ls-tight:    -0.03em;   /* H2 */
  --ls-snug:     -0.02em;   /* H1 */
  --ls-none:      0;
  --ls-wide:      0.02em;   /* H5 */
  --ls-wider:     0.06em;   /* CTA button */
  --ls-widest:    0.12em;   /* eyebrow labels */

  /* ──────────────────────────────────────────────
     ESPAÇAMENTO — escala em rem (em-based, generoso)
  ────────────────────────────────────────────── */

  --space-xxs:  0.25rem;    /* 4px */
  --space-xs:   0.5rem;     /* 8px */
  --space-sm:   1rem;       /* 16px */
  --space-md:   1.5rem;     /* 24px */
  --space-lg:   2rem;       /* 32px */
  --space-xl:   3rem;       /* 48px */
  --space-xxl:  4rem;       /* 64px */
  --space-3xl:  6rem;       /* 96px */

  /* Section padding */
  --section-pad-y:        5rem;      /* 80px — espaço generoso */
  --section-pad-y-compact: 4rem;     /* 64px */
  --section-pad-y-hero:   6rem;      /* 96px */
  --section-pad-x:        var(--space-lg);

  /* Containers */
  --container-max:        1200px;
  --container-mid:         960px;
  --container-narrow:      800px;
  --container-text:        640px;

  /* Grid gap */
  --gap-sm:   1.5rem;   /* 24px */
  --gap-md:   2rem;     /* 32px */
  --gap-lg:   3rem;     /* 48px */

  /* ──────────────────────────────────────────────
     BORDER RADIUS
  ────────────────────────────────────────────── */

  --radius-sharp:         0;
  --radius-hairline:      2px;
  --radius-subtle:        3px;
  --radius-card:          10px;
  --radius-badge:         1.25em;
  --radius-rounded:       1.5rem;
  --radius-large:         30px;
  --radius-pill:          100vw;      /* botões CTA */
  --radius-button:        3.75em;     /* pill-like CTAs (DNA original) */

  /* ──────────────────────────────────────────────
     SOMBRAS — flat design, quase nenhuma sombra
  ────────────────────────────────────────────── */

  --shadow-none:     none;
  --shadow-card:     0 0 0 1px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-focus:    0 0 0 2px var(--color-charcoal);

  /* ──────────────────────────────────────────────
     TRANSIÇÕES / MOTION
  ────────────────────────────────────────────── */

  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-scroll:  600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ──────────────────────────────────────────────
     Z-INDEX
  ────────────────────────────────────────────── */

  --z-base:     0;
  --z-above:    10;
  --z-sticky:   100;
  --z-nav:      200;
  --z-overlay:  300;
  --z-modal:    400;

  /* ──────────────────────────────────────────────
     BREAKPOINTS (referência — use em @media)
     sm: 480px | md: 768px | lg: 1024px | xl: 1200px
  ────────────────────────────────────────────── */

}

/* ──────────────────────────────────────────────────────────────
   TOKENS DE COMPONENTE — atalhos semanticos para uso direto
────────────────────────────────────────────────────────────── */

:root {
  /* NAV */
  --nav-bg-transparent:  transparent;
  --nav-bg-scroll:       var(--color-pearl);
  --nav-border-scroll:   var(--color-border-subtle);
  --nav-height:          4.5rem;

  /* BOTÃO CTA primário */
  --btn-bg:              var(--color-charcoal);
  --btn-text:            var(--color-pure-white);
  --btn-radius:          var(--radius-pill);
  --btn-pad-x:           2rem;
  --btn-pad-y:           0.75rem;
  --btn-tracking:        var(--ls-wider);
  --btn-font:            var(--font-label);
  --btn-weight:          var(--fw-medium);
  --btn-transform:       uppercase;

  /* BOTÃO CTA invertido (seção dark) */
  --btn-inv-bg:          var(--color-pearl);
  --btn-inv-text:        var(--color-charcoal);

  /* BOTÃO outline (seção dark, WhatsApp CTA) */
  --btn-outline-border:  var(--color-pure-white);
  --btn-outline-text:    var(--color-pure-white);

  /* CARD */
  --card-bg:             var(--color-pure-white);
  --card-border:         var(--color-border-subtle);
  --card-radius:         var(--radius-card);
  --card-shadow:         var(--shadow-card);
  --card-pad:            var(--space-lg);

  /* BADGE */
  --badge-radius:        var(--radius-badge);
  --badge-pad-x:         0.75em;
  --badge-pad-y:         0.25em;
  --badge-font:          var(--font-label);
  --badge-size:          var(--text-xs);
  --badge-weight:        var(--fw-medium);
  --badge-transform:     uppercase;
  --badge-tracking:      var(--ls-wider);

  /* EYEBROW LABEL */
  --label-font:          var(--font-label);
  --label-size:          var(--text-xs);
  --label-weight:        var(--fw-medium);
  --label-transform:     uppercase;
  --label-tracking:      var(--ls-widest);
  --label-color:         var(--color-wheat-grass);

  /* QUOTE / PULLQUOTE */
  --quote-font:          var(--font-display);
  --quote-size:          2em;
  --quote-style:         italic;
  --quote-weight:        var(--fw-light);
  --quote-lh:            var(--lh-snug);

  /* DIVIDER */
  --divider-color:       var(--color-border-mid);
  --divider-width:       1px;

  /* ACCORDION */
  --accordion-border:    var(--color-border-subtle);
  --accordion-pad-y:     var(--space-md);
  --accordion-active-color: var(--color-charcoal);
}