/* ==========================================================================
   BOA Digital — Design Tokens
   Extraído de https://boadigital.com.br em 2026-07-12 via getComputedStyle
   e análise do CSS do tema (hello-theme-child).
   Tokens marcados como "PROPOSTO" não existem no site original.
   ========================================================================== */

:root {
  /* Controles nativos (popup de select, scrollbars, date picker) seguem o tema */
  color-scheme: light;

  /* ------------------------------------------------------------------
     CORES — Primitivas
     ------------------------------------------------------------------ */

  /* Scarlet (primária — laranja). O tema nomeia --Scarlet-100. */
  --scarlet-50:  #FFF5ED;
  --scarlet-100: #FFE8D4;
  --scarlet-200: #FFCDA8;
  --scarlet-500: #FF5710;
  --scarlet-600: #F03C06;
  --scarlet-700: #C72A07;

  /* Ocean (secundária — azul/ciano) */
  --ocean-50:  #EBFDFF;
  --ocean-100: #CDF7FF;
  --ocean-300: #4FD9FF;
  --ocean-400: #00A6DC;
  --ocean-500: #0183B9;
  --ocean-600: #096995;
  --ocean-700: #115679;
  --ocean-900: #062E46;

  /* Neutras (cinzas azulados) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F7F9;
  --neutral-100: #E8E8E8;
  --neutral-200: #D7DAE0;
  --neutral-300: #B3B9C6;
  --neutral-400: #8A94A6;
  --neutral-600: #565E73;
  --neutral-700: #363A44;
  --neutral-800: #24262D;
  --neutral-900: #121212;

  /* ------------------------------------------------------------------
     CORES — Semânticas
     ------------------------------------------------------------------ */
  --color-primary:        var(--scarlet-600);
  --color-primary-light:  var(--scarlet-500);
  --color-primary-dark:   var(--scarlet-700);
  --color-secondary:      var(--ocean-600);
  --color-secondary-dark: var(--ocean-900);
  --color-accent:         var(--ocean-400);
  --color-focus:          var(--ocean-300);

  --color-text-heading: var(--neutral-700);
  --color-text-body:    var(--neutral-600);
  --color-text-muted:   var(--neutral-400);
  --color-text-strong:  var(--neutral-800);
  --color-text-inverse: var(--neutral-0);
  --color-text-placeholder: var(--neutral-300);

  --color-bg-page:       var(--neutral-0);
  --color-bg-subtle:     var(--neutral-50);
  --color-bg-brand-soft: var(--scarlet-50);
  --color-bg-info-soft:  var(--ocean-50);
  --color-bg-dark:       var(--ocean-900);

  --color-border-default:   var(--neutral-200);
  --color-border-subtle:    var(--neutral-100);
  --color-border-brand:     var(--scarlet-600);
  --color-border-highlight: var(--ocean-300);

  /* Feedback — info/error derivados da paleta; success/warning PROPOSTOS */
  --color-info:         var(--ocean-400);
  --color-info-soft:    var(--ocean-50);
  --color-success:      #1E8E3E;   /* PROPOSTO */
  --color-success-soft: #E6F4EA;   /* PROPOSTO */
  --color-warning:      #B77900;   /* PROPOSTO */
  --color-warning-soft: #FFF4D6;   /* PROPOSTO */
  --color-error:        var(--scarlet-700);
  --color-error-soft:   #FCEAE5;   /* PROPOSTO */

  /* Gradientes (botão primário) */
  --gradient-primary:       linear-gradient(107deg, #FF5710 25.17%, #F03C06 91.75%);
  --gradient-primary-hover: linear-gradient(107deg, #F03C06 25.17%, #FF5710 91.75%);

  /* Gradientes de seção — extraídos de .hero-box, .cta-box e .contact */
  --gradient-hero:    radial-gradient(138.23% 138.23% at 50% 8.03%, #FFFFFF 39.63%, #CDF7FF 100%);
  --gradient-cta:     radial-gradient(129.28% 78.14% at 22.92% 46.85%, #FF5710 0%, #F03C06 100%);
  --gradient-section: linear-gradient(107deg, #EBFDFF 8.42%, #FFFFFF 48.29%, #EBFDFF 92.73%);

  /* ------------------------------------------------------------------
     TIPOGRAFIA
     Fira Sans → títulos | Open Sans → corpo
     (o site usa html{font-size:62.5%}; aqui os tokens são em px)
     ------------------------------------------------------------------ */
  --font-heading: "Fira Sans", sans-serif;
  --font-body:    "Open Sans", sans-serif;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --font-size-display: 96px;   --line-height-display: 115.2px;
  --font-size-h1:      56px;   --line-height-h1:      67.2px;
  --font-size-h2:      48px;   --line-height-h2:      57.6px;
  --font-size-h3:      43px;   --line-height-h3:      53.75px;
  --font-size-h4:      32px;   --line-height-h4:      38.4px;
  --font-size-h5:      28px;   --line-height-h5:      33.6px;
  --font-size-h6:      24px;   --line-height-h6:      30px;
  --font-size-lead:    20px;   --line-height-lead:    32px;
  --font-size-body:    16px;   --line-height-body:    23.2px;
  --font-size-sm:      14px;   --line-height-sm:      21px;
  --font-size-caption: 13px;   --line-height-caption: 16.25px;
  --font-size-micro:   11px;   --line-height-micro:   14px;  /* UI densa — vindo dos widgets Fluig */

  /* ------------------------------------------------------------------
     ESPAÇAMENTO — escala base 4px
     ------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* ------------------------------------------------------------------
     BORDER-RADIUS
     ------------------------------------------------------------------ */
  --radius-sm:   4px;    /* botões */
  --radius-md:   8px;    /* inputs, cards do blog */
  --radius-lg:   16px;   /* cards e boxes da home */
  --radius-pill: 200px;  /* taglines e chips */
  --radius-full: 50%;    /* ícones circulares */

  /* ------------------------------------------------------------------
     SOMBRAS (elevação)
     ------------------------------------------------------------------ */
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-md: 0px 4px 12px 0px rgba(16, 24, 40, 0.08); /* PROPOSTO */
  --shadow-lg: 8px 8px 26px 0px rgba(0, 0, 0, 0.10),
               34px 32px 47px 0px rgba(0, 0, 0, 0.09),
               76px 73px 63px 0px rgba(0, 0, 0, 0.05);
  --shadow-brand: -1px 2px 5px 0px rgba(255, 77, 0, 0.10),
                  -3px 8px 9px 0px rgba(255, 77, 0, 0.09),
                  -6px 19px 12px 0px rgba(255, 77, 0, 0.05),
                  -11px 34px 14px 0px rgba(255, 77, 0, 0.01);

  /* ------------------------------------------------------------------
     MOVIMENTO
     ------------------------------------------------------------------ */
  --transition-fast: 0.3s;
  --transition-slow: 0.5s;

  /* ------------------------------------------------------------------
     DIMENSÕES DE COMPONENTES
     ------------------------------------------------------------------ */
  --size-button-height:    48px;
  --size-button-height-sm: 38px;
  --size-header-height:    96px;
  --size-tagline-height:   40px;

  /* ------------------------------------------------------------------
     BREAKPOINTS — extraídos das media queries do tema.
     Custom properties não funcionam em @media: use os valores
     documentados abaixo diretamente nas queries.
       --breakpoint-sm: 599px   (celular)
       --breakpoint-md: 767px   (tablet retrato)
       --breakpoint-lg: 991px   (tablet paisagem / menu mobile)
       --breakpoint-xl: 1279px  (desktop compacto)
     ------------------------------------------------------------------ */
  --breakpoint-sm: 599px;
  --breakpoint-md: 767px;
  --breakpoint-lg: 991px;
  --breakpoint-xl: 1279px;
  --container-max: 1200px; /* PROPOSTO — largura de conteúdo */

  /* ------------------------------------------------------------------
     Z-INDEX — escala de camadas
     (header 999 e conteúdos fixos extraídos do tema; demais PROPOSTOS)
     ------------------------------------------------------------------ */
  --z-base:     1;
  --z-dropdown: 500;
  --z-sticky:   900;   /* header fixo */
  --z-drawer:   950;   /* sidebar/menu mobile */
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;
}

/* ==========================================================================
   MODO ESCURO [PROPOSTO — o site não possui tema escuro]
   Ative com <html data-theme="dark">. As primitivas são redefinidas e os
   tokens semânticos (que referenciam primitivas via var()) seguem sozinhos.
   Os matizes da marca são preservados; as neutras invertem a escala.
   ========================================================================== */
[data-theme="dark"] {
  /* Controles nativos renderizam escuros (popup de select, scrollbars…) */
  color-scheme: dark;

  /* Neutras — escala invertida (0 = superfície escura, 900 = quase branco) */
  --neutral-0:   #16181D;
  --neutral-50:  #1C1F26;
  --neutral-100: #272B34;
  --neutral-200: #343A46;
  --neutral-300: #4D5566;
  --neutral-400: #8A94A6;  /* mesmo valor do claro — funciona nos dois fundos */
  --neutral-600: #B4BCCA;
  --neutral-700: #D7DBE2;
  --neutral-800: #ECEEF2;
  --neutral-900: #F6F7F9;

  /* Scarlet — tons claros viram tintas escuras; núcleo mais vivo p/ contraste */
  --scarlet-50:  #2A1710;
  --scarlet-100: #3D2012;
  --scarlet-200: #5A2C12;
  --scarlet-500: #FF6B2E;
  --scarlet-600: #FF5710;
  --scarlet-700: #FFB38C;  /* texto sobre scarlet-100 escuro */

  /* Ocean — mesmo princípio */
  --ocean-50:  #0D2B33;
  --ocean-100: #103744;
  --ocean-300: #4FD9FF;    /* foco mantém */
  --ocean-400: #2FC0EA;
  --ocean-500: #4FC6EE;
  --ocean-600: #7BD4F5;
  --ocean-700: #A8E4FA;
  /* --ocean-900 mantém #062E46: continua sendo o fundo "dark" da marca */

  /* Feedback — versões para fundo escuro */
  --color-success:      #4CC272;
  --color-success-soft: #10291A;
  --color-warning:      #E5A83B;
  --color-warning-soft: #33270E;
  --color-error:        #FF6B4A;
  --color-error-soft:   #391812;

  /* Gradientes de seção adaptados (o do botão/CTA se mantém — é a marca) */
  --gradient-hero:    radial-gradient(138.23% 138.23% at 50% 8.03%, #16181D 39.63%, #0D2B33 100%);
  --gradient-section: linear-gradient(107deg, #0D2B33 8.42%, #16181D 48.29%, #0D2B33 92.73%);
}