/* =========================================================
   TOKENS: única fonte de verdade para cor, tipo, espaço e movimento.
   Seções novas devem consumir estas variáveis, nunca hex soltos.
   ========================================================= */
@layer tokens {
  :root {
    /* ---------- Cor: marca (aprovadas pelo cliente) ---------- */
    --c-green-base:   #477558;   /* verde claro ORIGINAL do hero (o hero foi escurecido em 2026-09-30); hoje só no fundo do Sobre */
    --c-green-gate:   #345F4B;   /* arte do portão */
    --c-green-deep:   #223A2C;   /* fundo da página, fades */
    --c-green-brand:  #1F3D2E;   /* fundo institucional do logo */
    --c-green-night:  #16261F;
    --c-green-ink:    #1C3329;   /* texto escuro sobre claro */
    --c-cream:        #F0EADC;
    --c-cream-soft:   #F4F1EA;
    --c-linen:        #F0E4CC;   /* linho do painel central */
    --c-terracotta:   #C4574B;   /* link ativo, acentos */
    --c-white:        #FFFFFF;

    /* seção Sobre mim: creme quente e sálvia (os verdes são os mesmos da página, acima) */
    --c-cream-warm:  #f1ead8;
    --c-sage-light:  #a9c4ad;
    --c-cta-green:   #16301f;   /* pontas do botão tricolor */
    /* dourado: exceção aprovada pelo cliente, só no "SOBRE MIM" */
    --grad-gold-fade: linear-gradient(180deg, #d9b36a 0%, #b08a4a 45%, rgba(176, 138, 74, .25) 78%, rgba(176, 138, 74, 0) 100%);

    /* bandeira LGBTQIAPN+ em tons suavizados: usar como filete, nunca como bloco */
    --c-flag-1: #C4564E; --c-flag-2: #D68C50; --c-flag-3: #DEBE60;
    --c-flag-4: #68A076; --c-flag-5: #507AAA; --c-flag-6: #8264A6;
    --flag-gradient: linear-gradient(90deg, var(--c-flag-1), var(--c-flag-2), var(--c-flag-3),
                                            var(--c-flag-4), var(--c-flag-5), var(--c-flag-6));

    /* ---------- Cor: papéis semânticos ---------- */
    --bg:            var(--c-green-deep);
    --bg-alt:        var(--c-green-brand);
    --surface-light: var(--c-linen);
    --text:          var(--c-white);
    --text-soft:     rgba(255, 255, 255, .78);
    --text-on-light: var(--c-green-ink);
    --accent:        var(--c-terracotta);
    --line:          rgba(240, 234, 220, .14);
    --line-strong:   rgba(240, 234, 220, .28);
    --focus-ring:    var(--c-cream);

    /* vidro fosco (navbar, selo, botões flutuantes) */
    --glass-bg:      linear-gradient(180deg, rgba(28, 52, 40, .46), rgba(28, 52, 40, .30));
    --glass-bg-solid:linear-gradient(180deg, rgba(28, 52, 40, .72), rgba(28, 52, 40, .58));
    --glass-blur:    blur(14px) saturate(1.15);
    --glass-border:  1px solid var(--line);

    /* ---------- Tipografia ---------- */
    --ff-display: "Italiana", "Times New Roman", serif;       /* navbar, menu, rótulos: SEMPRE caixa alta */
    --ff-serif:   "Fraunces", Georgia, serif;                  /* títulos de seção */
    --ff-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* texto corrido */
    --ff-caps:      "Cinzel", "Trajan Pro", Georgia, serif;                      /* títulos em caixa alta */
    --ff-small:     "Marcellus", "Cinzel", Georgia, serif;                       /* selos, botões, rótulos */
    --ff-garamond:  "Cormorant Garamond", "Times New Roman", Georgia, serif;     /* bio, subtítulos */
    --ff-condensed: "Bebas Neue", "Oswald", Impact, sans-serif;                  /* nome gigante */
    --tracking-display: .16em;

    /* escala fluida (360px → 1440px) */
    --fs-xs:   clamp(.75rem,  .72rem + .15vw, .8125rem);
    --fs-sm:   clamp(.875rem, .85rem + .12vw, .9375rem);
    --fs-base: clamp(1rem,    .96rem + .2vw,  1.0625rem);
    --fs-lg:   clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
    --fs-xl:   clamp(1.375rem, 1.2rem + .8vw,  1.875rem);
    --fs-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --fs-3xl:  clamp(2.25rem, 1.6rem + 3vw,   4rem);
    --lh-tight: 1.1;
    --lh-body:  1.65;

    /* ---------- Espaço ---------- */
    --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem;
    --space-lg: 1.5rem;  --space-xl: 2rem;  --space-2xl: 3rem;  --space-3xl: 4.5rem;
    --gutter:        clamp(20px, 5vw, 96px);           /* respiro lateral da página */
    --section-space: clamp(4.5rem, 3rem + 7vw, 9rem);  /* respiro vertical entre seções */
    --container:     1240px;
    --container-narrow: 760px;

    /* ---------- Forma e profundidade ---------- */
    --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --radius-pill: 999px;
    --shadow-soft: 0 10px 40px -18px rgba(8, 20, 14, .45);
    --shadow-lift: 0 18px 40px -14px rgba(8, 20, 14, .55);

    /* ---------- Navbar (usado também pelo scroll-padding das âncoras) ----------
       Removido e trazido de volta em 2026-09-30 (menu enxuto, fonte Manrope). */
    --nav-h: 76px;
    --nav-h-scrolled: 64px;
    --brand-size: 84px;          /* selo sai 16px da faixa: não aumentar (pedido do Victor) */
    --brand-size-scrolled: 72px;

    /* ---------- Botão flutuante de WhatsApp (components/whatsapp.css) ---------- */
    --wa-size: 56px;
    --wa-gap: 24px;              /* distância das bordas da tela (+ área segura do iPhone) */

    /* ---------- Camadas (z-index) ---------- */
    --z-veil: 15;
    --z-drawer: 20;
    --z-nav: 30;
    --z-float: 40;              /* botão flutuante de WhatsApp */
    --z-gate: 50;

    /* ---------- Movimento ----------
       Todas as animações do site usam estes tokens. Com prefers-reduced-motion
       as durações caem para ~0 (ver motion.css), então nenhuma seção precisa
       tratar isso individualmente. */
    --ease-out:    cubic-bezier(.16, 1, .3, 1);   /* assinatura do projeto (portão, navbar) */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-soft:   cubic-bezier(.2, .7, .2, 1);
    --ease-reveal: var(--ease-out);                /* curva do data-reveal; seções podem trocar localmente */
    --ease-slide:  cubic-bezier(.76, 0, .24, 1);   /* portas/quadro que se abrem */
    --dur-fast: .25s;
    --dur-base: .5s;
    --dur-slow: .9s;
    --dur-reveal: 1s;
    --reveal-distance: 28px;
    --stagger-step: 90ms;
  }

  @media (max-width: 760px), (max-aspect-ratio: 4/5) {
    :root {
      --nav-h: 62px;
      --nav-h-scrolled: 58px;
      --brand-size: 66px;        /* selo sai 10px no mobile */
      --brand-size-scrolled: 62px;
      --wa-size: 52px;
      --wa-gap: 16px;
      --reveal-distance: 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: .01ms; --dur-base: .01ms; --dur-slow: .01ms; --dur-reveal: .01ms;
      --reveal-distance: 0px; --stagger-step: 0ms;
    }
  }
}