/* ROOT — Acro Digital */

:root {

  /* ============================================================
     CORES DE MARCA — ESCALA DE AZUIS (Manual de Marca v1)
     ============================================================ */
  --color-primary-900: #102A43; /* títulos, texto de alto contraste */
  --color-primary-800: #1A365D; /* texto base, headers secundários */
  --color-primary-700: #2A4365; /* hover, estados secundários */
  --color-primary-600: #004AAD; /* CTAs, botões, links, ícones de destaque */
  --color-primary-300: #84C9F8; /* fundos suaves, badges, hover de cards */
  --color-primary-50:  #EBF8FF; /* fundos muito suaves, seções alternadas */

  /* Cor de marca exclusiva (logotipo e peças de identidade máxima) */
  --color-brand-logo: #004AAD;

  /* ============================================================
     NEUTROS
     ============================================================ */
  --color-white:      #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-400: #94A3B8;

  /* ============================================================
     CORES FUNCIONAIS
     ============================================================ */
  --color-whatsapp:    #25D366;
  --color-whatsapp-hv: #1DA851;
  --color-google-star: #FBBC04;

  /* ============================================================
     TIPOGRAFIA — Roboto auto-hospedada (.woff2, sem Google Fonts CDN)
     ============================================================ */
  --font-family-base: 'Roboto', sans-serif;

  --fw-regular:  400;
  --fw-medium:   600;
  --fw-semibold: 600;
  --fw-bold:     600;

  /* Tamanhos fluidos com clamp() — nunca fixos por breakpoint */
  --font-size-h1:     clamp(1.75rem, 1.1rem + 3vw, 3rem);
  --font-size-h2:     clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
  --font-size-h3:     clamp(1.15rem, 0.95rem + 1vw, 1.5rem);
  --font-size-body:   clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --font-size-small:  clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);
  --font-size-btn:    clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --font-size-badge:  clamp(0.7rem, 0.65rem + 0.1vw, 0.85rem);

  /* Escala de altura de linha e espaçamento entre letras por papel */
  --line-height-heading: 1.15;
  --line-height-body:    1.6;
  --line-height-caption: 1.4;
  --letter-spacing-heading: 0em;
  --letter-spacing-badge:   0.08em;

  /* ============================================================
     RAIOS
     ============================================================ */
  --radius-block:  0px;
  --radius-card:   8px;
  --radius-button: 8px;

  /* ============================================================
     CONTAINERS E GRID — 4 BREAKPOINTS CONSOLIDADOS
     ============================================================
     Desktop      (≥1025px): max-width fixo, grid 3 colunas
     Tablet       (768–1024px): 90%, grid 2 colunas
     Mobile Paisagem (481–767px): 88%, grid 2 colunas
     Mobile Retrato  (≤480px): 88%, grid 1 coluna
     ------------------------------------------------------------ */
  --container-max-width: 1160px;
  --container-width-tablet: 90%;
  --container-width-mobile-p: 88%;
  --container-width-mobile-r: 88%;

  --grid-columns-desktop: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile-p: 2;
  --grid-columns-mobile-r: 1;

  --gap-grid: 24px;

  /* Espaçamento entre blocos, por breakpoint */
  --space-block-desktop:  80px;
  --space-block-tablet:   60px;
  --space-block-mobile-p: 50px;
  --space-block-mobile-r: 40px;

  /* Ponto de colapso do menu hambúrguer — fixo em todos os projetos */
  --breakpoint-hamburger: 1025px;

  /* ============================================================
     BOTÕES
     ============================================================ */
  --btn-padding-y: 0.9em;
  --btn-padding-x: 1.8em;
  --btn-min-touch: 44px;
  --btn-transition: 0.3s ease;

  --btn-secondary-padding-y: 0.5em;
  --btn-secondary-padding-x: 1em;
  --btn-secondary-radius: 8px;

  /* ============================================================
     HERO — sem Variante do Método 04 (background aplicado externamente)
     ============================================================ */
  --overlay-color:   var(--color-primary-900);
  --overlay-opacity: 0.55;
  --blender-color:   var(--color-primary-900);
  --blender-height:  120px;

  /* ============================================================
     BADGES
     ============================================================ */
  --badge-margin-bottom: 10px;

  /* ============================================================
     BIBLIOTECA DE ÍCONES
     ============================================================ */
  --icon-library: "Tabler Icons";

  /* ============================================================
     TRANSIÇÕES E MOVIMENTO
     ============================================================ */
  --transition-fade: 0.6s ease;
  --transition-hover: 0.2s ease;

}

/* [CSS → arquivo autônomo: css/root.css — carregado antes de global.css e style.css] */