/* ==========================================================================
   Digitalli - Design tokens
   Fonte da verdade para cor, tipografia, espaco, raio, sombra e movimento.
   Nenhum valor bruto (hex, px de espacamento) deve aparecer fora deste arquivo.

   ORIENTACAO DO TEMA
   O protótipo define uma página predominantemente clara, com alguns painéis
   escuros arredondados pontuando a leitura (serviços, destaque, chamada final
   e rodapé). Por isso `:root` carrega o tema CLARO — o padrão de qualquer
   seção — e `.dg-invert` re-mapeia os MESMOS nomes de token para o painel
   escuro. Componentes nunca precisam saber em que fundo estão.
   ========================================================================== */

/* `.dg-on-light` reaplica o tema claro dentro de um painel escuro — e o
   cartao branco do formulario sobre a chamada final, no prototipo. Entra na
   mesma lista de `:root` para nao existirem dois lugares com os mesmos
   valores. */
:root,
.dg-on-light {
  /* ---------- Marca ------------------------------------------------------ */
  /* DIGITALLI SOLAR. Este arquivo veio do site da Eletronica, que usa o
     coral como acento. Aqui os MESMOS nomes carregam as cores do logotipo
     do Solar — o azul do hexagono e o ambar do "d" —, para que base.css,
     components.css e pages.css continuem identicos aos de la. Leia a familia
     `--dg-red-*` como "acento da marca", nao como vermelho.

     Acento nao textual (barras, pontos, degrades): o ambar do "d". */
  --dg-red: #f2a51f;
  /* Preenchimento de botao com texto branco: o azul do hexagono (8,2:1). */
  --dg-red-600: #2b4a9b;
  --dg-red-700: #213a7c;
  --dg-red-300: #fcd27f;
  --dg-red-marca: #fbb941;
  --dg-azul: #2e4ca0;
  --dg-azul-300: #7b97dc;
  /* Meio do caminho entre o azul e o ambar no texto em degrade do rodape. */
  --dg-violeta: #a9bde9;
  --dg-red-soft: rgba(242, 165, 31, 0.16);
  --dg-red-glow: rgba(242, 165, 31, 0.4);
  /* Degrade azul -> ambar usado em titulos de destaque e detalhes. */
  --dg-gradiente: linear-gradient(105deg, var(--dg-azul), var(--dg-red));

  --dg-graphite: #363435; /* cinza do logotipo */
  --dg-silver-100: #d2d3d5;
  --dg-silver-200: #bebfc1;
  --dg-silver-300: #aaabaf;
  --dg-silver-400: #97989a;
  --dg-silver-500: #858688;
  --dg-silver-600: #727377;

  /* ---------- Pagina --------------------------------------------------- */
  --dg-page: #ffffff;
  /* Secoes vao de ponta a ponta e de canto vivo, como no site publicado. */
  --dg-shell-gap: 0px;
  --dg-shell-radius: 0px;
  /* O cabecalho, esse sim, flutua recuado: 30px a 1280 e 40px a 1440. */
  --dg-header-gap: clamp(14px, 2.4vw, 40px);

  /* ---------- Superficies claras (padrao) -------------------------------- */
  --dg-bg: #ffffff;
  --dg-bg-raised: #f5f6f7;
  --dg-bg-sunken: #f0f1f2;
  --dg-surface: #ffffff;
  --dg-surface-2: #f4f5f6;
  --dg-hairline: rgba(16, 16, 16, 0.12);
  --dg-hairline-strong: rgba(16, 16, 16, 0.2);

  /* ---------- Texto ------------------------------------------------------ */
  --dg-text: #111111;
  --dg-text-muted: #55585c;
  --dg-text-faint: #65686c;
  /* Par fixo tinta/papel: nao muda no escopo escuro. Serve aos poucos
     componentes que precisam de contraste maximo independente do fundo —
     a pilula da pagina atual no menu, selos sobre foto, etc. */
  --dg-ink: #111111;
  --dg-paper: #ffffff;
  /* Aliases historicos, mantidos para quem precisa fixar um dos dois lados. */
  --dg-text-on-light: #111111;
  --dg-text-on-light-muted: #55585c;
  --dg-text-on-dark: #f7f7f7;

  /* Acento para TEXTO e icones. O ambar nao chega a 2:1 sobre branco, entao
     no tema claro o texto de destaque e o azul fechado (9,1:1). */
  --dg-red-ink: #24448f;

  /* ---------- Cores de apoio --------------------------------------------- */
  --dg-whatsapp: #1faa55;
  --dg-whatsapp-glow: rgba(31, 170, 85, 0.75);
  /* Gradiente do bloco de destaque: grafite -> marinho -> azul da marca. */
  --dg-spotlight-1: #15171c;
  --dg-spotlight-2: #172038;
  --dg-spotlight-3: #1f3266;

  /* ---------- Semanticos ------------------------------------------------- */
  --dg-ok: #1f7a54;
  --dg-warn: #8a5d1f;
  --dg-err: #c62828;
  --dg-focus: #0b4fc4;
  /* Fundo usado nas faixas de estado do formulario. */
  --dg-ok-soft: color-mix(in srgb, var(--dg-ok) 12%, transparent);
  --dg-err-soft: color-mix(in srgb, var(--dg-err) 12%, transparent);

  /* ---------- Tipografia ------------------------------------------------- */
  /* As mesmas do site em WordPress (tema Neuros): Sora nos titulos, Manrope
     no texto. Auto-hospedadas por tools/fetch_fonts.py. */
  --dg-font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --dg-font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dg-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* Escala fluida (clamp) - base 16px, razao ~1.25 */
  --dg-fs-xs: 0.78rem;
  --dg-fs-sm: 0.875rem;
  --dg-fs-base: 1rem;
  --dg-fs-md: clamp(1.05rem, 0.99rem + 0.28vw, 1.2rem);
  --dg-fs-lg: clamp(1.25rem, 1.13rem + 0.55vw, 1.55rem);
  --dg-fs-xl: clamp(1.6rem, 1.36rem + 1.1vw, 2.25rem);
  --dg-fs-2xl: clamp(2rem, 0.2rem + 4.6vw, 3.75rem);
  --dg-fs-3xl: clamp(2.3rem, 0.3rem + 5.2vw, 4.4rem);
  --dg-fs-4xl: clamp(2.8rem, 0.4rem + 6.4vw, 5.2rem);

  --dg-lh-tight: 1.167;
  --dg-lh-snug: 1.22;
  --dg-lh-normal: 1.875;
  --dg-lh-loose: 1.75;

  --dg-tracking-tight: -0.05em;
  --dg-tracking-wide: 0.08em;
  --dg-tracking-caps: 0.16em;

  /* ---------- Espaco (escala 4px) ---------------------------------------- */
  --dg-space-1: 0.25rem;
  --dg-space-2: 0.5rem;
  --dg-space-3: 0.75rem;
  --dg-space-4: 1rem;
  --dg-space-5: 1.5rem;
  --dg-space-6: 2rem;
  --dg-space-7: 2.5rem;
  --dg-space-8: 3rem;
  --dg-space-9: 4rem;
  --dg-space-10: 5rem;
  --dg-space-11: 6.5rem;
  --dg-space-12: 8rem;

  --dg-section-y: clamp(3.75rem, 2.4rem + 4.6vw, 6.5rem);
  --dg-gutter: clamp(1rem, 0.3rem + 2.8vw, 2.5rem);

  /* ---------- Layout ------------------------------------------------------ */
  --dg-container: 1200px;
  --dg-container-wide: 1320px;
  --dg-container-narrow: 760px;
  --dg-header-h: 112px;
  --dg-header-h-compact: 84px;
  /* Distancia do topo quando o cabecalho gruda (no site publicado: 32px). */
  --dg-header-stick: 20px;

  /* ---------- Raio / sombra ---------------------------------------------- */
  --dg-radius-sm: 8px;
  --dg-radius: 14px;
  --dg-radius-lg: 20px;
  --dg-radius-xl: 25px;
  --dg-radius-pill: 999px;

  --dg-shadow-sm: 0 1px 2px rgba(16, 16, 16, 0.08);
  --dg-shadow: 0 10px 30px -14px rgba(16, 16, 16, 0.24);
  --dg-shadow-lg: 0 30px 60px -26px rgba(16, 16, 16, 0.28);
  --dg-shadow-red: 0 16px 38px -16px var(--dg-red-glow);

  /* ---------- Movimento --------------------------------------------------- */
  --dg-dur-fast: 140ms;
  --dg-dur: 260ms;
  --dg-dur-slow: 520ms;
  --dg-dur-slower: 900ms;
  --dg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Camadas ----------------------------------------------------- */
  --dg-z-base: 1;
  --dg-z-sticky: 50;
  --dg-z-header: 100;
  --dg-z-menu: 110;
  --dg-z-overlay: 200;
  --dg-z-preloader: 300;
}

/* Paineis escuros: reaproveitam os mesmos nomes de token em escopo local, de
   modo que os componentes nao precisam saber em que fundo estao. Aplica-se as
   secoes marcadas com `dg-invert`, ao hero, ao cabecalho de pagina interna, a
   chamada final e ao rodape. */
.dg-invert,
.dg-header,
.dg-hero,
.dg-page-head,
.dg-spotlight,
.dg-cta,
.dg-footer,
.dg-404,
.dg-mobile-menu,
.dg-lightbox,
.dg-preloader {
  --dg-bg: #1f1f1f;
  --dg-bg-raised: #262626;
  --dg-bg-sunken: #171717;
  --dg-surface: #2b2b2b;
  --dg-surface-2: #343434;
  --dg-hairline: rgba(255, 255, 255, 0.12);
  --dg-hairline-strong: rgba(255, 255, 255, 0.22);
  --dg-text: #f7f7f7;
  --dg-text-muted: #b0b0b0;
  /* Com a superficie escura em #343434, o cinza anterior caia para 4,42:1. */
  --dg-text-faint: #a3a3a3;
  /* Sobre o preto o destaque volta a ser o ambar (9,9:1). */
  --dg-red-ink: #fbbf4a;
  /* Os tons semanticos tambem: os valores do tema claro ficam abaixo de 3:1
     sobre o painel escuro. */
  --dg-ok: #3fb984;
  --dg-warn: #e0a33c;
  --dg-err: #ef5350;
  --dg-focus: #7cc4ff;
  --dg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36);
  --dg-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --dg-shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, 0.72);
}