/* ==========================================================================
   Tokens
   Fonte única de verdade do design. Nenhum outro arquivo deve usar valor cru.
   Alguns degraus das escalas não estão em uso hoje: ficam de propósito, para
   a escala continuar inteira e ninguém precisar inventar número.
   ========================================================================== */

:root {
  /* ---------- Cor ------------------------------------------------------- */
  /* Vindas das variáveis do Figma, sem alteração. */
  --purple-900: #4e1998;
  --purple-700: #7452b5;
  --purple-600: #7c4dbe;
  --purple-300: #d3bdff;
  --purple-200: #e4dcf9;
  --purple-100: #f8f5ff;

  --neutral-900: #1a1224;
  --neutral-800: #222222;
  --neutral-500: #5c5666;
  --neutral-200: #e5dfea;
  --white: #ffffff;

  /* A rampa de amarelo entrou no Figma junto com a reforma do acordeão, mas só
     a 200 chega a ser desenhada. As outras cinco existem como variável lá e
     ficam fora daqui até alguma delas ser usada. */
  --yellow-200: #ffebb3;

  /* Papéis semânticos — use estes no CSS, não os tokens brutos acima. */
  --color-brand: var(--purple-700);
  --color-brand-strong: var(--purple-900);
  --color-brand-accent: var(--purple-600);

  --color-text: var(--neutral-800);
  --color-text-long: var(--neutral-900);
  --color-text-muted: var(--neutral-500);
  /* Conteúdo sobre fundo de marca. Não é branco puro: o Figma usa purple/100
     no título do fechamento e no texto dos botões roxos, e purple/200 no
     parágrafo de apoio. */
  --color-text-on-brand: var(--purple-100);
  --color-text-on-brand-muted: var(--purple-200);

  --color-surface: var(--white);
  --color-surface-soft: var(--purple-100);
  --color-surface-strong: var(--purple-200);
  /* Realce quente: post-it, chip e o traço à mão em volta do título aberto. */
  --color-surface-postit: var(--yellow-200);
  /* Reação do chevron ao hover. Tinha o mesmo token do post-it até o post-it
     virar amarelo; separado porque agora são duas decisões diferentes. */
  --color-surface-hover: var(--purple-300);

  --color-border: var(--neutral-200);
  --color-rule: var(--neutral-200); /* réguas do caderno */
  --color-track: var(--neutral-200); /* trilha vazia da barra do carrossel */

  /* ---------- Espaçamento ---------------------------------------------- */
  /* Base 4. O número do token é o valor em px dividido por 4.
     ≤24px anda de 4 em 4; acima disso, de 8 em 8 (e 16 em 16 no topo). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* ---------- Layout ---------------------------------------------------- */
  /* Grid de 12 colunas, margem 56, gutter 24. Em 1440 isso dá área útil de
     1328, coluna de 88.67 e passo de 112.67 — os números que explicam quase
     todas as posições do Figma. */
  --container-wide: 1328px;
  --gutter: clamp(var(--space-6), 4vw, var(--space-14));
  --grid-columns: 12;
  --grid-gutter: var(--space-6);

  --section-py: clamp(var(--space-16), 7vw, var(--space-24));
  --header-height: 128px;
  --header-height-compact: 80px;
  --header-logo: 72px;
  --header-logo-compact: 40px;

  /* ---------- Tipografia ------------------------------------------------ */
  --font-display: "Funnel Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Playpen Sans", "Bradley Hand", cursive;

  /* Escala de 9 passos. Os três maiores são fluidos: encolhem no mobile
     sem precisar de media query. */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.875rem; /* 14 */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.25rem; /* 20 */
  --text-2xl: 1.5rem; /* 24 */
  --text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); /* 28 → 36 */
  --text-4xl: clamp(2rem, 1.3rem + 3.1vw, 3.5rem); /* 32 → 56 */
  --text-5xl: clamp(2.25rem, 1.4rem + 3.8vw, 4rem); /* 36 → 64 */
  --text-bubble: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* 28 → 40 */
  /* "Vamos conversar?" acompanha o H1 até 768 e se separa no mobile: o H1 vai
     para 36 e o CTA fica em 40. */
  --text-cta: var(--text-5xl);

  --leading-tight: 1.1; /* display e botão */
  --leading-snug: 1.4; /* corpo do acordeão */
  --leading-normal: 1.5; /* corpo e UI */
  --leading-relaxed: 1.65; /* texto longo, 4+ linhas */

  --tracking-display: -0.02em; /* H1 e CTA 64 */
  --tracking-title: -0.02em; /* H2 56 */
  --tracking-button: -0.01em; /* botão 20 */
  --tracking-wide: 0.11em; /* rótulo em caixa alta */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---------- Raio ------------------------------------------------------ */
  --radius-sm: 8px; /* imagem pequena */
  --radius-md: 16px; /* imagem grande, card */
  --radius-lg: 24px; /* card de depoimento, chips do Sobre */
  --radius-xl: 32px; /* banner legado */
  --radius-bubble: 40px; /* balões Dream big */
  --radius-cta: 80px; /* caixa "Vamos conversar?" */
  --radius-avatar: 20px; /* foto do depoimento */
  --radius-full: 999px; /* botão */

  /* ---------- Sombra ---------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgb(78 25 152 / 0.08);
  --shadow-md: 0 4px 12px rgb(78 25 152 / 0.12);
  --shadow-lg: 0 8px 24px rgb(78 25 152 / 0.16);
  /* Sombra do post-it, valor exato do Figma. Fora da escala acima porque é
     cinza e curta de propósito: papel encostado no papel, não card flutuando. */
  --shadow-postit: 0 4px 4px 1px rgb(0 0 0 / 0.2);

  /* ---------- Movimento ------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Mais macia que a --ease-out, que arranca forte. Para coisa que aparece e
     desaparece no lugar, onde o arranque rápido lê como picado. */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-mid: 400ms;
  --duration-slow: 560ms;
  /* O risco à mão em volta da modalidade aberta corre mais devagar que o resto
     da interface, e de propósito: ali a graça é ver a caneta desenhando, não
     chegar rápido no fim.

     Este é o tempo do MAIOR traço ("Consultoria para Teachers" no desktop). Os
     outros levam a fração correspondente ao tamanho deles, calculada no script,
     para a caneta correr sempre no mesmo ritmo. Se o celular pedir um ritmo
     próprio, é só sobrescrever este token dentro do @media de lá. */
  --duration-risco: 760ms;

  /* ---------- Caderno --------------------------------------------------- */
  /* Passo das réguas. A linha fechada tem essa altura exata, e as réguas que
     seguem por baixo dos post-its mantêm o mesmo passo para o caderno ler como
     uma folha só. */
  --notebook-row: 104px;

  /* ---------- Carrossel ------------------------------------------------- */
  /* Inclinação da miniatura da próxima foto, valor exato do Figma. Fica
     aqui, e não inline como nos post-its, porque é uma só. */
  --carousel-peek-tilt: -5.19deg;
  /* Medidas do Figma: foto atual 316×424, miniatura da próxima 204×276. */
  --carousel-photo-w: 316px;
  --carousel-peek-w: 204px;
  /* Passo das bolinhas: 12px de traço, 48px quando é a foto atual. */
  --carousel-dot-size: 12px;
  --carousel-dot-active-size: 48px;
  /* Altura do alvo de toque em volta do traço de 12px. */
  --carousel-dot-target: 32px;

  /* ---------- Camadas --------------------------------------------------- */
  --z-header: 100;
  --z-raised: 10;
  /* Baralho de duas cartas do hero, que trocam de lugar no hover. */
  --z-deck-front: 2;
  --z-deck-back: 1;
}

/* --------------------------------------------------------------------------
   Mobile — artboard de 390 (Figma 1262:6987)
   Uma coluna só e margem de 24 nas laterais: o conteúdo acompanha a largura
   da tela (342 em 390). Tudo que é posicionado — Sobre, post-its — ancora na
   margem esquerda, não numa medida travada.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --grid-columns: 1;
    --gutter: var(--space-6);

    --section-py: var(--space-14); /* 56 em todas as seções do artboard */
    --header-height: 112px; /* 32 + logo 48 + 32 */
    --header-height-compact: 64px;
    --header-logo: 48px;
    --header-logo-compact: var(--space-8);

    /* Régua do caderno: 72 no mobile, 104 no desktop. */
    --notebook-row: 72px;

    --text-4xl: 2.25rem; /* 36 — título de seção */
    --text-5xl: 2.25rem; /* 36 — H1 do hero */
    --text-cta: 2.5rem; /* 40 — "Vamos conversar?" */

    /* Foto do carrossel encolhe; a miniatura fica em 204 e sangra pela
       esquerda da janela. */
    --carousel-photo-w: 247px;
    --carousel-dot-size: 8px;
  }
}