/* Fontes auto-hospedadas (licenças OFL em assets/fonts/licenses) */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta escura aqui; com JS o site abre na clara "Lavanda" (o theme.js marca o data-theme) e o botão ☀/☾ troca.
     Sem JS, segue o sistema (bloco @media prefers-color-scheme mais abaixo) */
  color-scheme: dark;

  /* Primitivos: só são usados aqui, para definir os semânticos */
  --space-950: #07070B;
  --space-850: #12111A;
  --mist-100: #E8E6F0;
  --mist-400: #9A97A8;
  --void-400: #A78BFA;
  --void-700: #6D28D9;
  --gold-400: #D6B25E;
  --green-400: #4ADE80;

  /* Semânticos: os componentes só consomem estes */
  --color-bg: var(--space-950);
  --color-panel: rgba(18, 17, 26, .78);
  --color-panel-solid: var(--space-850);
  --color-text: var(--mist-100);
  --color-muted: var(--mist-400);
  --color-line: rgba(232, 230, 240, .16);
  --color-line-strong: rgba(232, 230, 240, .55);
  --color-accent: var(--void-400);
  --color-accent-soft: rgba(109, 40, 217, .35);
  --color-accent-glow: rgba(109, 40, 217, .22);
  --color-exotic: var(--gold-400);
  --color-orb: #E0529C;
  /* Serviços: cada serviço tem o tom de um estado do orbe animado (atlas_orb.js, STATE_LOOK): landing = idle
     (rosa), sistema = waiting (dourado), manutenção = remembering (violeta). --color-svc-*: o tom do botão e dos
     losangos (no escuro, a própria cor do orbe; no claro, mais escuro, para o botão ser legível);
     --color-glow-svc-*: a cor viva, igual nos dois temas (o brilho em volta do orbe e o toque na superfície);
     --color-on-svc-*: o texto em cima do botão cheio no tom; --glow-strength: a força do brilho (no claro, mais leve) */
  --color-svc-landing: #E0529C;
  --color-svc-system: #E8C97A;
  --color-svc-maintenance: #B98CFF;
  --color-glow-svc-landing: #E0529C;
  --color-glow-svc-system: #E8C97A;
  --color-glow-svc-maintenance: #B98CFF;
  --color-on-svc-landing: var(--space-950);
  --color-on-svc-system: var(--space-950);
  --color-on-svc-maintenance: var(--space-950);
  --color-on-tone: var(--space-950);
  --glow-strength: 1;
  --color-exotic-soft: rgba(214, 178, 94, .35);
  --color-success: var(--green-400);
  --color-bar-track: rgba(232, 230, 240, .1);
  --color-exotic-line: rgba(214, 178, 94, .45);
  --color-star: rgba(255, 255, 255, .5);
  --color-scanline: rgba(255, 255, 255, .025);
  /* Parceiros: o tom da parceria é o do orbe no estado "looking" (verde-água, que conversa com o azul e o verde da
     logo do ECOPESCA). --color-partner: fio, losangos e botão (no claro, mais escuro, para o texto do botão ser
     legível); --color-glow-partner: a cor viva do brilho, igual nos dois temas; --color-on-partner: texto no botão.
     --color-logo-halo: o halo atrás das logos dos parceiros (sem fundo, feitas para fundo claro). No escuro, uma luz
     clara e difusa e (--color-logo-glow) um brilho claro rente ao desenho, para o azul-marinho da logo não sumir; no
     claro, só um toque do tom no halo e nenhum brilho */
  --color-partner: #6FE3C1;
  --color-glow-partner: #6FE3C1;
  --color-on-partner: var(--space-950);
  --color-logo-halo: rgba(236, 234, 243, .5);
  --color-logo-glow: rgba(236, 234, 243, .95);

  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  /* Título principal de cada página (h1): nenhum outro título passa dele */
  /* O teto em vw só age com a letra do sistema grande no celular (200%+): a palavra mais longa ainda cabe na linha.
     Com a letra normal ele fica acima do clamp de 320 px para cima, então nada muda */
  --fs-h1: min(clamp(2.4rem, 5vw, 4rem), 12vw);
  /* Título de fechamento ("Vamos conversar?", fim do Salão): sempre menor que o h1 */
  --fs-closing: min(clamp(1.9rem, 3.4vw, 2.8rem), 10vw);

  /* Cantos no meio-termo (nem quadrado nem redondo demais, pedido do fundador): cards e botões com 10 px */
  --radius: 10px;
  --radius-pill: 10px;

  --max-width: 75rem;
  --gutter: 1.5rem;
  --header-height: 4.75rem;
}

/* Computador: o conteúdo acompanha a largura da janela (84% dela, nunca menos que 75rem, que já cresce com a
   letra): em tela grande o site ocupa a tela em vez de ficar numa faixa estreita no meio */
@media (min-width: 861px) {
  :root { --max-width: max(75rem, 84vw); }
}

/* Versão clara "Lavanda": pelo sistema (se o visitante não escolheu escuro) ou pelo botão */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-bg: #ECEAF3;
    --color-panel: rgba(255, 255, 255, .72);
    --color-panel-solid: #F7F6FB;
    --color-text: #15131F;
    --color-muted: #57536A;
    --color-line: rgba(21, 19, 31, .14);
    --color-line-strong: rgba(21, 19, 31, .5);
    --color-accent: var(--void-700);
    --color-accent-soft: rgba(109, 40, 217, .14);
    --color-accent-glow: rgba(139, 92, 246, .22);
    --color-exotic: #8A6516;
    --color-orb: #C0307E;
    --color-exotic-soft: rgba(180, 140, 50, .22);
    --color-success: #15803D;
    --color-bar-track: rgba(21, 19, 31, .1);
    --color-exotic-line: rgba(138, 101, 22, .45);
    --color-star: rgba(91, 33, 182, .25);
    --color-scanline: rgba(21, 19, 31, .03);
    --color-logo-halo: rgba(111, 227, 193, .1);
    --color-logo-glow: transparent;
    --color-partner: #0F766E;
    --color-on-partner: #FFFFFF;
    --color-on-tone: #FFFFFF;
    /* Tons dos serviços no claro (contraste do texto do botão: 5,3 / 6,9 / 5,7) */
    --color-svc-landing: #C0307E;
    --color-svc-system: #C99619;
    --color-svc-maintenance: #7C3AED;
    --color-on-svc-landing: #FFFFFF;
    --color-on-svc-system: #15131F;
    --color-on-svc-maintenance: #FFFFFF;
    --glow-strength: .72;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #ECEAF3;
  --color-panel: rgba(255, 255, 255, .72);
  --color-panel-solid: #F7F6FB;
  --color-text: #15131F;
  --color-muted: #57536A;
  --color-line: rgba(21, 19, 31, .14);
  --color-line-strong: rgba(21, 19, 31, .5);
  --color-accent: var(--void-700);
  --color-accent-soft: rgba(109, 40, 217, .14);
  --color-accent-glow: rgba(139, 92, 246, .22);
  --color-exotic: #8A6516;
  --color-orb: #C0307E;
  --color-exotic-soft: rgba(180, 140, 50, .22);
  --color-success: #15803D;
  --color-bar-track: rgba(21, 19, 31, .1);
  --color-exotic-line: rgba(138, 101, 22, .45);
  --color-star: rgba(91, 33, 182, .25);
  --color-scanline: rgba(21, 19, 31, .03);
  --color-logo-halo: rgba(111, 227, 193, .1);
  --color-logo-glow: transparent;
  --color-partner: #0F766E;
  --color-on-partner: #FFFFFF;
  --color-on-tone: #FFFFFF;
  /* Tons dos serviços no claro (contraste do texto do botão: 5,3 / 6,9 / 5,7) */
  --color-svc-landing: #C0307E;
  --color-svc-system: #C99619;
  --color-svc-maintenance: #7C3AED;
  --color-on-svc-landing: #FFFFFF;
  --color-on-svc-system: #15131F;
  --color-on-svc-maintenance: #FFFFFF;
  --glow-strength: .72;
}

/* Rodapé invertido (pedido do fundador): branco no site escuro e preto no site claro, fechando a página
   com contraste. Os componentes do rodapé seguem usando os mesmos tokens semânticos, redefinidos só aqui */
.site-footer {
  color-scheme: light;
  --color-bg: #FFFFFF;
  --color-text: #15131F;
  --color-muted: #57536A;
  --color-line: rgba(21, 19, 31, .14);
  --color-line-strong: rgba(21, 19, 31, .5);
  --color-accent: var(--void-700);
  --color-orb: #C0307E;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-footer {
    color-scheme: dark;
    --color-bg: var(--space-950);
    --color-text: var(--mist-100);
    --color-muted: var(--mist-400);
    --color-line: rgba(232, 230, 240, .16);
    --color-line-strong: rgba(232, 230, 240, .55);
    --color-accent: var(--void-400);
    --color-orb: #E0529C;
  }
}
:root[data-theme="light"] .site-footer {
  color-scheme: dark;
  --color-bg: var(--space-950);
  --color-text: var(--mist-100);
  --color-muted: var(--mist-400);
  --color-line: rgba(232, 230, 240, .16);
  --color-line-strong: rgba(232, 230, 240, .55);
  --color-accent: var(--void-400);
  --color-orb: #E0529C;
}