/* ==========================================================================
   FONTES LOCAIS (assets/fonts)
   ========================================================================== */

@font-face {
  font-family: 'MexicanKnappett';
  src: url('../fonts/mexican_knappett.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Asimovian — Fonte dos títulos e logotipo */
@font-face {
  font-family: 'Asimovian';
  src: url('../fonts/asimovian-latin.woff2') format('woff2'),
       url('../fonts/asimovian-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Asimovian';
  src: url('../fonts/asimovian-regular.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Outfit — Fonte de texto e interface */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-variable-latin.woff2') format('woff2-variations'),
       url('../fonts/outfit-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     1. IDENTIDADE VISUAL & PALETA DE CORES
     ========================================================================== */

  /* --- Profundidades & Oceano --- */
  --cor-abismo: rgb(0, 3, 5);             /* Fundo mais escuro para áreas abissais */
  --cor-agua-profunda: rgb(0, 10, 16);     /* Tom abissal intermediário */
  --cor-fundo: rgb(0, 35, 41);             /* Fundo escuro azul-esverdeado */
  --cor-painel: rgb(0, 46, 50);            /* Fundo de painéis e capas */
  --cor-casco: rgb(1, 56, 60);             /* Tom metálico de submarino e estruturas */
  --cor-jade: rgb(16, 84, 79);             /* Verde jade oceânico base */
  --cor-jade-claro: rgb(99, 182, 175);     /* Realce de cristas e ondas */

  /* --- Mergulho: cor de fundo de cada zona de profundidade ---
     A cor muda nas quebras de seção (onde ficam as faixas "0–200 M", "200–1000 M"...).
     Regra: cada zona é MAIS ESCURA que a anterior; nunca ponha uma cor mais clara que a anterior. */
  --prof-0: var(--cor-jade);               /* Início (superfície) */
  --prof-1: rgb(10, 66, 64);               /* O Mundo        0–200 m */
  --prof-2: rgb(5, 46, 46);                /* Habitantes     200–1000 m */
  --prof-3: rgb(2, 30, 32);                /* Mural          1000–2000 m */
  --prof-4: rgb(0, 16, 21);                /* Contato        2000–3400 m */
  --prof-5: rgb(0, 6, 9);                  /* Fundo abissal  3400+ m e rodapé */
  --passa-1: color-mix(in srgb, var(--prof-1), var(--prof-2));  /* tons de passagem entre zonas */
  --passa-2: color-mix(in srgb, var(--prof-2), var(--prof-3));
  --passa-3: color-mix(in srgb, var(--prof-3), var(--prof-4));
  --passa-4: color-mix(in srgb, var(--prof-4), var(--prof-5));
  --mescla-profundidade: 14rem;            /* altura da mescla no pé de cada seção */
  --faixa-profundidade: 9rem;              /* altura da transição de cor, a partir da faixa de profundidade */

  /* --- Interface, Iluminação & Tipografia em Fundo Escuro --- */
  --cor-menta-neon: rgb(15, 244, 204);     /* Realces luminosos bioluminescentes */
  --cor-espuma: rgb(238, 246, 245);        /* Branco marítimo suave para leitura em fundos escuros */
  --cor-nevoa: rgb(169, 192, 190);         /* Cinza-azulado suave para textos secundários */
  --cor-nevoa-acessivel: rgb(196, 216, 214); /* Contraste ≥ 4.5:1 sobre fundos escuros */
  --cor-sinal: rgb(22, 104, 99);           /* Indicadores e foco de interface */
  --cor-sinal-claro: rgb(62, 144, 137);    /* Bordas e elementos divisores */
  --cor-sinal-texto: rgb(135, 210, 203);   /* Texto legível de sinalização (≥ 4.5:1) */

  /* --- Metais, Carimbos & Destaques --- */
  --cor-ambar: rgb(224, 144, 40);          /* Dourado/âmbar para números e ícones */
  --cor-ambar-acessivel: rgb(140, 82, 0);  /* Âmbar de alto contraste sobre pergaminho */
  --cor-ferrugem: rgb(193, 75, 44);        /* Vermelho ferrugem característico */
  --cor-ferrugem-acessivel: rgb(160, 55, 25); /* Ferrugem legível sobre pergaminho claro */
  --cor-ferrugem-profunda: rgb(128, 42, 18);  /* Estado hover de botões ferrugem */
  --cor-ferrugem-clara: rgb(255, 160, 130);   /* Subtítulos em destaque sobre fundos escuros */
  --cor-terracota: rgb(206, 77, 44);       /* Alertas e ênfases quentes */
  --cor-terracota-acessivel: rgb(168, 50, 20); /* Terracota de alto contraste sobre papel */

  /* --- Papel, Pergaminho & Impressão --- */
  --cor-pergaminho: rgb(239, 220, 181);    /* Fundo quente para cartões, fichas e dossiês */
  --cor-pergaminho-borda: rgb(235, 207, 173); /* Contorno sutil para folhas de papel */
  --cor-tinta: rgb(50, 27, 11);            /* Tinta escura principal de texto impresso */
  --cor-tinta-suave: rgb(100, 73, 56);     /* Tinta suavizada para notas e bordas pontilhadas */
  --cor-tinta-suave-acessivel: rgb(72, 48, 32); /* Tinta secundária com contraste WCAG garantido */

  /* --- Ações & Botões --- */
  --cor-oceano: rgb(27, 155, 149);         /* Tom de ação oceânico */
  --cor-oceano-acessivel: rgb(10, 88, 84); /* Ação primária acessível (≥ 7:1 sobre claro / ≥ 4.5:1 sobre papel) */
  --cor-oceano-acessivel-hover: rgb(7, 70, 67); /* Estado hover do botão oceânico */

  /* ==========================================================================
     2. DIMENSÕES & PROPORÇÕES DO LIVRO 3D
     ========================================================================== */
  --livro-unidade: clamp(36px, min(3.6vw, 6.4vh), 50px);
  --livro-largura-base: 18.5;
  --livro-altura-base: 12.5;

  /* ==========================================================================
     3. TIPOGRAFIA & ESCALAS
     ========================================================================== */

  /* Famílias Tipográficas */
  --fonte-titulo: "Asimovian", sans-serif;
  --fonte-texto: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fonte-emblema: "Cinzel", Georgia, serif;

  /* Pesos Padronizados (WCAG / Acessibilidade) */
  --peso-regular: 400;   /* Parágrafos, descrições e leitura geral */
  --peso-medio: 500;     /* Dados moderados e metadados */
  --peso-semibold: 600;  /* Subtítulos, rótulos de campos e botões */
  --peso-bold: 700;      /* Títulos, números grandes e chamadas principais */

  /* Alturas de Linha (Line-height) */
  --linha-compacta: 1.15; /* Títulos grandes e números de seção */
  --linha-curta: 1.3;     /* Cabeçalhos de cards e botões */
  --linha-base: 1.45;     /* Textos curtos, itens de lista e campos */
  --linha-leitura: 1.6;   /* Parágrafos de leitura contínua (mínimo 1.5 WCAG) */

  /* Escala Modular de Tamanhos (Base 16px / rem) */
  --texto-micro: 0.75rem;    /* 12px - Selos, timestamps e legendas curtas */
  --texto-xs: 0.8125rem;     /* 13px - Indicadores secundários e notas */
  --texto-sm: 0.875rem;      /* 14px - Labels de formulário, menus e tags */
  --texto-base: 1rem;        /* 16px - Texto padrão do corpo da página */
  --texto-md: 1.125rem;      /* 18px - Textos de apoio e parágrafos de destaque */
  --texto-lg: 1.25rem;       /* 20px - Subtítulos e introduções */
  --texto-xl: 1.5rem;        /* 24px - Títulos h3/h4 e títulos de caixas */
  --texto-3xl: 2rem;         /* 32px - Nomes de destaque em cartões */
  --texto-4xl: 2.5rem;       /* 40px - Indicadores numéricos expressivos */

  /* Escalas Fluídas Responsivas */
  --titulo-hero: clamp(2.3rem, 7.5vw, 3.4rem);
  --titulo-secao-h2: clamp(1.75rem, 4.2vw, 3rem);
  --titulo-secao-numero: clamp(2.8rem, 6vw, 4rem);
  --titulo-subsecao: clamp(1.85rem, 4vw, 2.7rem);
  --titulo-citacao: clamp(0.95rem, 2vw, 1.3rem);
  --linha-divisoria-texto: clamp(0.8125rem, 1.6vw, 0.9375rem);

  /* ==========================================================================
     4. COMPONENTES: BOTÕES E CONTROLES DE INTERFACE
     ========================================================================== */

  /* Botões Reutilizáveis */
  --btn-altura-sm: 2.25rem;    /* 36px - Compacto */
  --btn-altura-md: 2.75rem;    /* 44px - Padrão ergonômico WCAG */
  --btn-altura-lg: 3.125rem;   /* 50px - Destaque para envio e chamadas */
  --btn-pad-sm: 0.45rem 1rem;
  --btn-pad-md: 0.65rem 1.4rem;
  --btn-pad-lg: 0.85rem 1.85rem;
  --btn-raio: 6px;
  --btn-borda: 1.5px;

  /* Controles de Formulário (Inputs, Selects, Textareas) */
  --campo-altura: 2.875rem;   /* 46px - Alinhado à altura de toque do botão */
  --campo-pad: 0.75rem 1rem;
  --campo-raio: 6px;
}