/* ============================================================================
 * PANTHALASSA — ESTRUTURA
 * CSS puro. Nenhum import, nenhum framework, nenhuma dependência.
 * Funciona em Astro, Next, Vite, React, HTML solto.
 *
 * Esta camada NÃO muda por venture. O que muda por venture é a PELE
 * (peles/<venture>.css), que só declara matiz e famílias de fonte.
 *
 * Medido em 2026-08-07 a partir de stricto-ds-kit/tokens/TYPOGRAPHY.md,
 * que por sua vez foi extraído do produto real. Onde eu diverjo da origem,
 * está registrado em DIVERGENTE.md com o motivo.
 * ========================================================================== */

/* Ordem das camadas, declarada pelo próprio sistema. Precisa vir antes de
   qualquer regra: quem importa não deveria ter que saber disso, e um consumidor
   que importasse na ordem errada teria a pele perdendo para a estrutura. */
@layer panthalassa.estrutura, panthalassa.pele, panthalassa.componentes;

@layer panthalassa.estrutura {
  :root {
    /* ---- Espaçamento. Base 4px. -------------------------------------- */
    --pt-esp-1: 4px;
    --pt-esp-2: 8px;
    --pt-esp-3: 12px;
    --pt-esp-4: 16px;
    --pt-esp-5: 24px;
    --pt-esp-6: 32px;
    --pt-esp-7: 48px;
    --pt-esp-8: 64px;
    --pt-esp-9: 96px;

    /* ---- Raio. No máximo 2 por superfície (método, estrutura). -------- */
    --pt-raio-p: 6px;
    --pt-raio: 12px;
    --pt-raio-g: 16px;
    --pt-raio-pilula: 999px;

    /* ---- Tipografia: famílias -----------------------------------------
     * Estes são apenas o PADRÃO. A pele redeclara os três nomes diretamente,
     * e a camada da pele vem depois, então ela vence.
     *
     * Não use indireção do tipo var(--pt-fonte-texto, ...) aqui: propriedade
     * customizada é resolvida no elemento onde é DECLARADA. Se a pele
     * estivesse marcada em qualquer elemento que não a raiz, o valor já teria
     * sido calculado como o padrão e herdado assim para baixo, e a venture
     * perderia a tipografia sem nenhum erro aparecer.
     * ------------------------------------------------------------------ */
    --pt-fonte: system-ui, sans-serif;
    --pt-fonte-titulo: system-ui, sans-serif;
    --pt-fonte-mono: ui-monospace, monospace;

    /* ---- Tipografia: REGISTRO DENSO (aplicação) ------------------------
     * Escala medida no produto. Use dentro de painel, tabela, card de app.
     * O corpo padrão de card é --pt-txt-corpo (13px), não 16px.
     * ------------------------------------------------------------------ */
    --pt-txt-micro: 9px;
    --pt-txt-eyebrow: 10px;
    --pt-txt-meta: 11px;
    --pt-txt-compacto: 12px;
    --pt-txt-corpo: 13px;
    --pt-txt-titulo: 14px;
    --pt-txt-titulo-g: 15px;

    /* ---- Tipografia: REGISTRO EDITORIAL (site, landing, documento) -----
     * Fluido: cresce com a viewport sem media query.
     * Nunca use registro denso em página de marketing, nem editorial
     * dentro de painel de aplicação.
     * ------------------------------------------------------------------ */
    --pt-txt-base: 16px;
    --pt-txt-lead: clamp(17px, 1.1vw + 14px, 20px);
    --pt-txt-h3: clamp(20px, 1.4vw + 16px, 24px);
    --pt-txt-h2: clamp(26px, 2.4vw + 18px, 34px);
    --pt-txt-h1: clamp(32px, 4vw + 20px, 46px);
    --pt-txt-hero: clamp(40px, 6.5vw + 20px, 68px);

    /* ---- Tipografia: pesos --------------------------------------------
     * 300 não existe em nenhuma família carregada: o browser sintetiza e
     * o resultado é sujo. O método bloqueia peso < 400.
     * ------------------------------------------------------------------ */
    --pt-peso-normal: 400;
    --pt-peso-medio: 500;
    --pt-peso-forte: 600;
    --pt-peso-max: 700;

    /* ---- Tipografia: métrica ------------------------------------------ */
    --pt-tracking-titulo: -0.02em;
    --pt-tracking-eyebrow: 0.16em;
    --pt-altura-linha: 1.5;
    --pt-altura-linha-titulo: 1.15;

    /* ---- Layout -------------------------------------------------------- */
    --pt-altura-cabecalho: 64px;
    --pt-largura-leitura: 68ch;
    --pt-largura-conteudo: 1200px;

    /* ---- Movimento ----------------------------------------------------- */
    --pt-dur-rapida: 120ms;
    --pt-dur: 200ms;
    --pt-dur-lenta: 320ms;
    --pt-ease: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Sombra --------------------------------------------------------
     * Só para o que FLUTUA de verdade: popover, menu, modal, toast.
     * Card não tem sombra. A elevação de card é a escala de borda.
     * Não existe --pt-sombra-card, e a ausência é deliberada.
     * ------------------------------------------------------------------ */
    --pt-sombra-flutuante: 0 18px 44px -22px oklch(0 0 0 / 0.65);
    --pt-sombra-modal: 0 28px 70px -30px oklch(0 0 0 / 0.75);
  }

  /* Respeita quem pediu menos movimento. Não é opcional. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --pt-dur-rapida: 1ms;
      --pt-dur: 1ms;
      --pt-dur-lenta: 1ms;
    }
  }
}