/* ==========================================================================
   MED — Mentoria Expert em Divórcio
   tokens.css · Fonte única de verdade do design system
   Reutilize este arquivo inteiro na página final.
   ========================================================================== */

:root {
  /* ---------- Cor · marca (amostradas do logo oficial) ---------- */
  --ouro:            #C09648;  /* dourado do logo — ação, destaque, filetes */
  --ouro-claro:      #E6CF9E;  /* brilho do metal, texto dourado em fundo escuro */
  --ouro-profundo:   #7F5F27;  /* dourado legível sobre fundo claro */
  --grafite:         #22252A;  /* grafite do logo — superfícies */

  /* ---------- Cor · apoio ---------- */
  --onix:            #0E0F11;  /* fundo principal da página */
  --onix-2:          #15171A;  /* faixa alternada escura */
  --grafite-2:       #2C3036;  /* superfície elevada / hover */
  --vinho:           #6B1F2C;  /* assinatura da Bárbara — só em atmosfera e detalhes */
  --vinho-profundo:  #3A0F18;
  --vinho-vivo:      #E36A7E;  /* ponto de "ao vivo" e marcadores das lives */
  --linho:           #F3EEE6;  /* seções claras */
  --linho-2:         #E9E2D6;  /* cartões e divisórias no claro */

  /* ---------- Cor · texto ---------- */
  --tx-claro:        #F3EEE6;              /* texto principal no escuro */
  --tx-claro-2:      rgba(243,238,230,.68);/* texto secundário no escuro */
  --tx-claro-3:      rgba(243,238,230,.52);/* legendas no escuro */
  --tx-escuro:       #1A1C20;              /* texto principal no claro */
  --tx-escuro-2:     #5A5852;              /* texto secundário no claro */

  /* ---------- Linhas ---------- */
  --linha-escura:    rgba(243,238,230,.10);
  --linha-escura-2:  rgba(243,238,230,.18);
  --linha-ouro:      rgba(192,150,72,.45);
  --linha-vinho:     rgba(227,106,126,.28);
  --linha-clara:     rgba(26,28,32,.12);

  /* ---------- Gradientes ---------- */
  --grad-ouro:       linear-gradient(135deg, #8C6A2E 0%, #C09648 38%, #E6CF9E 62%, #C09648 100%);
  --grad-ouro-texto: linear-gradient(100deg, #C09648 0%, #E6CF9E 45%, #C09648 75%, #8C6A2E 100%);
  --grad-aurora:     radial-gradient(60% 50% at 20% 10%, rgba(107,31,44,.55), transparent 70%),
                     radial-gradient(45% 40% at 85% 20%, rgba(192,150,72,.18), transparent 70%),
                     radial-gradient(70% 60% at 50% 110%, rgba(107,31,44,.35), transparent 70%);
  --grad-vela:       linear-gradient(180deg, rgba(14,15,17,0) 0%, rgba(14,15,17,.85) 70%, #0E0F11 100%);

  /* ---------- Tipografia ---------- */
  --f-display: "Cormorant", "Cormorant Garamond", Georgia, serif;   /* títulos */
  --f-caps:    "Montserrat", "Helvetica Neue", Arial, sans-serif;    /* rótulos em caixa alta, botões */
  --f-body:    "Manrope", "Segoe UI", Roboto, sans-serif;            /* texto corrido */

  /* Escala fluida (mobile → desktop) */
  --t-hero:    clamp(2.9rem, 1.6rem + 5.6vw, 6.4rem);   /* 46 → 102px */
  --t-h1:      clamp(2.4rem, 1.5rem + 3.8vw, 4.6rem);   /* 38 → 74px  */
  --t-h2:      clamp(2rem,   1.4rem + 2.6vw, 3.5rem);   /* 32 → 56px  */
  --t-h3:      clamp(1.45rem,1.2rem + 1vw,   1.9rem);   /* 23 → 30px  */
  --t-numero:  clamp(3rem,   2rem + 4vw,     5.5rem);   /* preço / números grandes */
  --t-lead:    clamp(1.1rem, 1rem + .45vw,   1.32rem);  /* 18 → 21px  */
  --t-body:    1.0625rem;                                /* 17px */
  --t-small:   .9375rem;                                 /* 15px */
  --t-caps:    .75rem;                                   /* 12px rótulos */
  --t-micro:   .6875rem;                                 /* 11px */

  --lh-tight:  1.02;
  --lh-title:  1.08;
  --lh-body:   1.65;
  --tr-caps:   .32em;   /* espaçamento do "MENTORIA" no logo */
  --tr-caps-2: .18em;   /* botões e badges */
  --tr-title:  -.015em;

  /* ---------- Espaço (base 4px) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;
  --secao:     clamp(88px, 6vw + 56px, 160px);  /* respiro vertical de seção */
  --gutter:    clamp(20px, 4vw, 48px);
  --max:       1200px;
  --max-texto: 720px;

  /* ---------- Forma ---------- */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;
  --r-d: 0 50% 50% 0 / 0 50% 50% 0;      /* moldura "D" (lado reto + lado curvo) */

  /* ---------- Sombra / elevação ---------- */
  --sh-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.35);
  --sh-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px -12px rgba(0,0,0,.6);
  --sh-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -30px rgba(0,0,0,.75);
  --sh-ouro: 0 0 0 1px rgba(192,150,72,.35), 0 18px 50px -18px rgba(192,150,72,.45);
  --sh-claro: 0 24px 60px -30px rgba(26,28,32,.35);

  /* ---------- Movimento ---------- */
  --ease-seda:   cubic-bezier(.16, 1, .3, 1);     /* padrão: entra rápido, assenta devagar */
  --ease-pendulo:cubic-bezier(.45, 0, .2, 1);     /* ida e volta, balanços */
  --ease-saida:  cubic-bezier(.4, 0, 1, 1);
  --d-micro:  180ms;   /* hover, foco */
  --d-curta:  420ms;   /* abrir/fechar */
  --d-media:  900ms;   /* revelações */
  --d-longa:  1600ms;  /* desenho de filetes */
  --d-ambiente: 24s;   /* aurora, respiração */
  --stagger:  90ms;

  /* ---------- Camadas ---------- */
  --z-fundo: -1; --z-base: 1; --z-sticky: 50; --z-header: 60; --z-modal: 100; --z-grao: 200;
}