/* ===========================================================================
   CASA TOHMÉ — tokens.css
   Fonte única dos valores da marca nesta landing page.
   Hex e regras tipográficas vêm dos vetores oficiais e do Manual da Marca.
   Não improvise cor nem peso aqui: mexeu aqui, mexeu na marca inteira.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FONTES
   Gotham (Hoefler&Co) e Florest são licenciadas. Estão auto-hospedadas em
   assets/fonts/ para uso da marca. Se um dia for preciso remover, a cascata
   cai em Montserrat / system-ui sem quebrar o layout (métricas próximas).
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('../assets/fonts/Gotham-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bolota';
  src: url('../assets/fonts/Bolota-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Florest';
  src: url('../assets/fonts/Florest-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---- Famílias e seus papéis (regra dura do manual) --------------------
     sans      → TUDO: H1 até corpo
     tag       → SÓ eyebrow / kicker / rótulo / logo. NUNCA em H1/H2.
     lettering → 1 a 3 palavras decorativas. Nunca um parágrafo.            */
  --font-sans: 'Gotham', 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-tag: 'Bolota', 'Gotham', system-ui, sans-serif;
  --font-lettering: 'Florest', 'Gotham', cursive;

  /* ---- Paleta da marca (hex conferidos nos vetores oficiais) ------------ */
  --ink:          #232C1B;  /* o "preto" da marca — traço do logo          */
  --green:        #546138;  /* verde primário                              */
  --green-mid:    #6C7B55;  /* folhagem                                    */
  --green-soft:   #9AA883;  /* folhagem clara                              */
  --orange:       #D38C37;  /* AÇÃO: CTA, link, UMA palavra de destaque    */
  --orange-deep:  #BA7D2D;  /* laranja em texto e hover                    */
  --brown:        #5D5437;  /* tronco da árvore                            */
  --areia:        #EAE5DF;  /* o "branco" da marca — nunca #fff em peça    */
  --preto:        #1E1E1E;

  /* ---- Superfícies de UI ------------------------------------------------ */
  --bg:          #FBFAF6;
  --surface:     #FFFFFF;
  --surface-alt: #F4F2EA;
  --border:      #E6E2D6;
  --text:        #232C1B;
  --text-muted:  #6B6A5C;

  /* Superfícies escuras (o "entardecer" da página) */
  --ink-deep:    #1A2114;
  --ink-soft:    #2C3723;
  --border-dark: rgba(234, 229, 223, .16);
  --text-on-dark:       #EAE5DF;
  --text-on-dark-muted: rgba(234, 229, 223, .66);

  /* ---- Tipografia fluida ----------------------------------------------- */
  /* A escala tem sete degraus e cada papel mora em um só — é isso que faz a
     página parecer desenhada por uma pessoa só. Referência de leitura: corpo
     nunca abaixo de 15px no celular nem de 16px no desktop, título de card num
     degrau só, e um salto claro entre título de seção e título de card.
       -2  12,5   rótulo, eyebrow, nota de rodapé
       -1  15–16  texto de apoio (card, passo, legenda, botão, rodapé)
        0  16–18  texto de leitura e pergunta do FAQ
        1  19–23  lead, título de card, parágrafo da chamada
        2  24–33  (reservado: título de bloco maior que card)
        4  35–73  título de seção
        5  44–93  título do hero                                             */
  --step--2: clamp(.72rem, .70rem + .10vw, .78rem);
  --step--1: clamp(.94rem, .91rem + .15vw, 1rem);
  --step-0:  clamp(1rem, .96rem + .20vw, 1.125rem);
  --step-1:  clamp(1.20rem, 1.12rem + .38vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.34rem + .78vw, 2.10rem);
  --step-3:  clamp(1.95rem, 1.64rem + 1.55vw, 3.10rem);
  --step-4:  clamp(2.10rem, 1.33rem + 3.52vw, 4.60rem);
  --step-5:  clamp(2.60rem, 1.61rem + 4.67vw, 5.80rem);

  /* ---- Ritmo e forma ---------------------------------------------------- */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1320px;
  --maxw-prosa: 62ch;
  --section-y: clamp(5rem, 11vw, 10.5rem);

  --r-sm: 8px;
  --r-btn: 10px;
  --r-card: 16px;
  --r-lg: 26px;
  --r-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(35, 44, 27, .05), 0 4px 12px rgba(35, 44, 27, .04);
  --shadow-md: 0 1px 2px rgba(35, 44, 27, .06), 0 12px 32px rgba(35, 44, 27, .07);
  --shadow-lg: 0 24px 70px -20px rgba(35, 44, 27, .30);

  /* ---- Movimento -------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);        /* saída suave, "premium" */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.33, .8, .35, 1);
  --dur-fast: 220ms;
  --dur: 520ms;
  --dur-slow: 900ms;

  --nav-h: 74px;
}

@media (max-width: 720px) {
  :root { --nav-h: 64px; }
}