/* ===================================================================
   SOLTEK ENGENHARIA - sistema de design
   Padrao: Trust & Authority + Conversion  (navy corporativo, laranja
   reservado para CTA e destaque - nunca como cor de texto no claro).
   Tipografia: Corporate Trust - Lexend (titulos) + Source Sans 3 (texto).
   Este e o unico arquivo com cores.
   =================================================================== */

@import url('/static/fontes.css');

:root {
  /* ---------- tintas da marca (constantes nos dois temas) ---------- */
  --navy:          #042854;
  --navy-escuro:   #04162e;
  --laranja:       #eb8709;
  --laranja-forte: #cf7607;

  /* ---------- tipografia ---------- */
  --fonte-titulo: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte:        'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono:   ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* escala 1.200 (minor third suave), base 16px */
  --t-xs:   0.75rem;    /* 12px - rotulos */
  --t-sm:   0.875rem;   /* 14px - tabelas, apoio */
  --t-base: 1rem;       /* 16px - corpo */
  --t-md:   1.125rem;   /* 18px - subtitulo */
  --t-lg:   1.375rem;   /* 22px - h2 */
  --t-xl:   1.75rem;    /* 28px - h1 interno */
  --t-2xl:  2.25rem;    /* 36px - secao da landing */
  --t-3xl:  3rem;       /* 48px - hero */

  /* ---------- espacamento (densidade padrao 4..64) ---------- */
  --e-1:  4px;  --e-2:  8px;  --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;

  --radius:    8px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --transicao: 180ms cubic-bezier(.2, .7, .3, 1);
  --largura:   1180px;

  /* ================= TEMA CLARO ================= */
  color-scheme: light;

  --brand:        var(--navy);
  --brand-fg:     #eef3fa;
  --brand-soft:   #e7edf6;
  --brand-borda:  #c9d6e8;

  --cta:          var(--laranja);
  --cta-hover:    var(--laranja-forte);
  --cta-fg:       #1a0f00;          /* texto escuro sobre laranja: 8.9:1 */
  --accent:       var(--laranja);
  --accent-texto: #8a4f08;
  --link:         #0a4a91;
  --link-hover:   #063567;

  --bg:           #f4f6fa;
  --bg-alt:       #eaeff7;
  --surface:      #ffffff;
  --surface-2:    #f8fafc;
  --text:         #0b1b30;
  --text-suave:   #24405f;
  --muted:        #56677f;
  --border:       #dbe3ee;
  --border-forte: #c2cfe0;

  --ok:   #15803d;  --ok-bg:   #dcfce7;
  --warn: #8a5a06;  --warn-bg: #fef3c7;
  --erro: #b3261e;  --erro-bg: #fee2e2;
  --info: #0a4a91;  --info-bg: #dbeafe;

  --sombra-1:    0 1px 2px rgb(4 40 84 / 6%), 0 1px 3px rgb(4 40 84 / 8%);
  --sombra-2:    0 2px 4px rgb(4 40 84 / 6%), 0 8px 20px rgb(4 40 84 / 10%);
  --sombra-3:    0 8px 16px rgb(4 40 84 / 10%), 0 20px 48px rgb(4 40 84 / 14%);
  --sombra-topo: 0 1px 3px rgb(4 22 46 / 24%);
  --sombra: var(--sombra-1);        /* compatibilidade */

  /* Topo e hero acompanham o tema: sao a primeira coisa que se ve, e no
     claro eles ficavam navy dando a impressao de que o tema nao trocou. */
  --topo-bg:      var(--surface);
  --topo-fg:      var(--text);
  --topo-suave:   var(--muted);
  --topo-borda:   var(--border);
  --topo-hover:   rgb(4 40 84 / 7%);
  --topo-controle: var(--border-forte);

  --hero-fundo:   linear-gradient(168deg, #ffffff 0%, #eef3fa 52%, #e2ebf7 100%);
  --hero-brilho:  radial-gradient(1100px 520px at 78% -12%, rgb(235 135 9 / 14%), transparent 62%);
  --hero-fg:      var(--text);
  --hero-suave:   var(--text-suave);
  --hero-malha:   rgb(4 40 84 / 6%);
  --hero-cartao:  rgb(255 255 255 / 82%);
  --hero-cartao-borda: var(--border);
  --hero-mini:    rgb(4 40 84 / 4%);
  --hero-mini-borda:   var(--border);
}

/* ================= TEMA ESCURO ================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    color-scheme: dark;

    --brand:        var(--navy-escuro);
    --brand-fg:     #e8eef7;
    --brand-soft:   #1a2942;
    --brand-borda:  #2b3f5e;

    --cta:          #f59e2c;
    --cta-hover:    #ffb254;
    --cta-fg:       #1a0f00;
    --accent:       #f59e2c;
    --accent-texto: #f59e2c;
    --link:         #8bbcf0;
    --link-hover:   #b6d5f7;

    --bg:           #080f1b;
    --bg-alt:       #0d1728;
    --surface:      #101c2e;
    --surface-2:    #16233a;
    --text:         #e8eef7;
    --text-suave:   #c3d0e2;
    --muted:        #93a3b8;
    --border:       #22334d;
    --border-forte: #314564;

    --ok:   #4ade80;  --ok-bg:   #123122;
    --warn: #fbbf24;  --warn-bg: #392a08;
    --erro: #fca5a5;  --erro-bg: #3d1618;
    --info: #8bbcf0;  --info-bg: #10263f;

    --sombra-1:    0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 30%);
    --sombra-2:    0 2px 6px rgb(0 0 0 / 45%), 0 10px 24px rgb(0 0 0 / 35%);
    --sombra-3:    0 10px 20px rgb(0 0 0 / 50%), 0 24px 56px rgb(0 0 0 / 45%);
    --sombra-topo: 0 1px 4px rgb(0 0 0 / 50%);
    --sombra: var(--sombra-1);

    --topo-bg:      var(--navy);
    --topo-fg:      #eef3fa;
    --topo-suave:   #9fb4cd;
    --topo-borda:   rgb(255 255 255 / 10%);
    --topo-hover:   rgb(255 255 255 / 12%);
    --topo-controle: rgb(255 255 255 / 26%);

    --hero-fundo:   linear-gradient(168deg, #052f61 0%, #042854 46%, #03203f 100%);
    --hero-brilho:  radial-gradient(1100px 520px at 78% -12%, rgb(235 135 9 / 20%), transparent 62%);
    --hero-fg:      #eef3fa;
    --hero-suave:   #c6d4e6;
    --hero-malha:   rgb(255 255 255 / 5%);
    --hero-cartao:  rgb(255 255 255 / 7%);
    --hero-cartao-borda: rgb(255 255 255 / 14%);
    --hero-mini:    rgb(255 255 255 / 8%);
    --hero-mini-borda:   rgb(255 255 255 / 12%);
  }
}

:root[data-tema="dark"] {
  color-scheme: dark;

  --brand:        var(--navy-escuro);
  --brand-fg:     #e8eef7;
  --brand-soft:   #1a2942;
  --brand-borda:  #2b3f5e;

  --cta:          #f59e2c;
  --cta-hover:    #ffb254;
  --cta-fg:       #1a0f00;
  --accent:       #f59e2c;
  --accent-texto: #f59e2c;
  --link:         #8bbcf0;
  --link-hover:   #b6d5f7;

  --bg:           #080f1b;
  --bg-alt:       #0d1728;
  --surface:      #101c2e;
  --surface-2:    #16233a;
  --text:         #e8eef7;
  --text-suave:   #c3d0e2;
  --muted:        #93a3b8;
  --border:       #22334d;
  --border-forte: #314564;

  --ok:   #4ade80;  --ok-bg:   #123122;
  --warn: #fbbf24;  --warn-bg: #392a08;
  --erro: #fca5a5;  --erro-bg: #3d1618;
  --info: #8bbcf0;  --info-bg: #10263f;

  --sombra-1:    0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 30%);
  --sombra-2:    0 2px 6px rgb(0 0 0 / 45%), 0 10px 24px rgb(0 0 0 / 35%);
  --sombra-3:    0 10px 20px rgb(0 0 0 / 50%), 0 24px 56px rgb(0 0 0 / 45%);
  --sombra-topo: 0 1px 4px rgb(0 0 0 / 50%);
  --sombra: var(--sombra-1);

  --topo-bg:      var(--navy);
  --topo-fg:      #eef3fa;
  --topo-suave:   #9fb4cd;
  --topo-borda:   rgb(255 255 255 / 10%);
  --topo-hover:   rgb(255 255 255 / 12%);
  --topo-controle: rgb(255 255 255 / 26%);

  --hero-fundo:   linear-gradient(168deg, #052f61 0%, #042854 46%, #03203f 100%);
  --hero-brilho:  radial-gradient(1100px 520px at 78% -12%, rgb(235 135 9 / 20%), transparent 62%);
  --hero-fg:      #eef3fa;
  --hero-suave:   #c6d4e6;
  --hero-malha:   rgb(255 255 255 / 5%);
  --hero-cartao:  rgb(255 255 255 / 7%);
  --hero-cartao-borda: rgb(255 255 255 / 14%);
  --hero-mini:    rgb(255 255 255 / 8%);
  --hero-mini-borda:   rgb(255 255 255 / 12%);
}

/* Respeita quem pediu menos movimento (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}