/* ==========================================================================
   DIAGNÓSTICO ESTRATÉGICO — DIEGO BRAGA
   TOKENS DE IDENTIDADE VISUAL

   >>> ESTE É O ÚNICO ARQUIVO QUE VOCÊ PRECISA EDITAR PARA MUDAR A APARÊNCIA.
   >>> Veja o manual em: dbraga_app/docs/IDENTIDADE-VISUAL.md

   Valores extraídos do site oficial https://www.soudiegobraga.com.br
   em 20/08/2026.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------
     1. CORES DA MARCA
     --------------------------------------------------------------- */

  /* Azul-marinho profundo — cor institucional principal */
  --primary-color:        #0B283F;
  --primary-dark:         #071826;
  --primary-light:        #122032;

  /* Dourado / bronze — cor de destaque e de ação */
  --secondary-color:      #B3916A;
  --secondary-dark:       #825F3D;
  --secondary-light:      #F2D1A4;

  /* Âmbar — realces pontuais */
  --accent-color:         #E0A337;

  /* Gradiente dourado dos botões (idêntico ao site) */
  --gradient-gold:        linear-gradient(120deg, #F2D1A4 0%, #825F3D 100%);
  --gradient-gold-hover:  linear-gradient(120deg, #F7DCB8 0%, #96703F 100%);

  /* ---------------------------------------------------------------
     2. SUPERFÍCIES E TEXTO
     --------------------------------------------------------------- */

  --background-color:     #FFFFFF;   /* fundo padrão das páginas claras   */
  --background-alt:       #F6F7F9;   /* faixas alternadas                 */
  --background-dark:      #071826;   /* seções escuras (hero, rodapé)     */
  --surface-color:        #FFFFFF;   /* cards sobre fundo claro           */
  --surface-dark:         #0B283F;   /* cards sobre fundo escuro          */

  --text-color:           #334155;   /* texto corrido                     */
  --text-strong:          #071826;   /* títulos sobre fundo claro         */
  --text-on-dark:         #FFFFFF;   /* texto sobre fundo escuro          */
  --muted-color:          #6B7A8C;   /* texto secundário                  */
  --muted-on-dark:        #A8B6C4;   /* texto secundário sobre escuro     */

  --border-color:         #E2E6EB;
  --border-dark:          rgba(255, 255, 255, 0.14);

  /* ---------------------------------------------------------------
     3. CORES DE ESTADO
     --------------------------------------------------------------- */

  --success-color:        #1E8E5A;
  --success-bg:           #E8F5EF;
  --warning-color:        #C9821A;
  --warning-bg:           #FDF3E3;
  --danger-color:         #B4342F;
  --danger-bg:            #FBEBEA;
  --info-color:           #2A6A9E;
  --info-bg:              #EAF2F8;

  /* Classificações do diagnóstico */
  --level-critico:        #B4342F;
  --level-atencao:        #C9821A;
  --level-estruturado:    #2A6A9E;
  --level-oportunidade:   #1E8E5A;

  /* ---------------------------------------------------------------
     4. TIPOGRAFIA
     --------------------------------------------------------------- */

  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* Escala tipográfica fluida (mobile -> desktop, sem media query) */
  --fs-xs:    0.75rem;                              /* 12px           */
  --fs-sm:    0.875rem;                             /* 14px           */
  --fs-base:  1rem;                                 /* 16px           */
  --fs-lg:    1.125rem;                             /* 18px           */
  --fs-xl:    clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-2xl:   clamp(1.5rem,  1.3rem + 1.1vw, 2rem);
  --fs-3xl:   clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --fs-4xl:   clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);

  --lh-tight:  1.18;
  --lh-snug:   1.35;
  --lh-normal: 1.65;

  --ls-tight:  -0.02em;
  --ls-wide:    0.06em;   /* usado nos rótulos em CAIXA ALTA */

  /* ---------------------------------------------------------------
     5. ESPAÇAMENTO
     --------------------------------------------------------------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* ---------------------------------------------------------------
     6. LARGURAS
     --------------------------------------------------------------- */

  --container-max:  1180px;
  --content-max:     720px;   /* leitura confortável   */
  --form-max:        620px;   /* telas do diagnóstico  */

  /* ---------------------------------------------------------------
     7. BORDAS, RAIOS E SOMBRAS
     --------------------------------------------------------------- */

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;      /* botões — igual ao site */

  --border-width: 1px;

  --shadow-sm: 0 1px 2px rgba(7, 24, 38, 0.06);
  --shadow-md: 0 4px 16px rgba(7, 24, 38, 0.08);
  --shadow-lg: 0 12px 40px rgba(7, 24, 38, 0.12);
  --shadow-gold: 0 8px 24px rgba(130, 95, 61, 0.28);

  /* ---------------------------------------------------------------
     8. TRANSIÇÕES
     --------------------------------------------------------------- */

  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 400ms ease;

  /* ---------------------------------------------------------------
     9. CAMADAS
     --------------------------------------------------------------- */

  --z-header:  100;
  --z-overlay: 500;
  --z-modal:   600;
  --z-toast:   700;
}

/* Respeita quem pediu menos animação no sistema operacional */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}