/* =========================================================
   Smart Badge · Design Tokens
   Identidade: onyx dominante, seções verde profundo,
   accent #5BFE50, teal SOMENTE no logo.
   ========================================================= */

:root {
  /* ---- Backgrounds ---- */
  --bg-onyx:        #0A0A0A;   /* base do site, near-black dominante */
  --bg-onyx-soft:   #111312;   /* cards/superfícies sobre onyx */
  --bg-green-deep:  #021F12;   /* seções verde profundo */
  --bg-green-dark:  #03150C;   /* variação mais escura */
  --grad-green:     radial-gradient(120% 120% at 50% 0%, #06351E 0%, #021F12 45%, #0A0A0A 100%);

  /* ---- Accent ---- */
  --accent:         #5BFE50;   /* verde sinal, único accent forte */
  --accent-dim:     #3FB23A;
  --accent-glow:    rgba(91, 254, 80, 0.35);
  --teal:           #01B89A;   /* SOMENTE no logo */

  /* ---- Texto ---- */
  --parchment:      #E8E4D6;   /* títulos display em seções verdes */
  --text:           #F4F5F2;
  --text-muted:     rgba(244, 245, 242, 0.62);
  --text-faint:     rgba(244, 245, 242, 0.40);
  --line:           rgba(244, 245, 242, 0.10);
  --line-strong:    rgba(244, 245, 242, 0.18);

  /* ---- Tipografia ---- */
  --font-display:   'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* ---- Escala fluida ---- */
  --h1:      clamp(3.2rem, 9vw, 8rem);
  --h2:      clamp(2.2rem, 5.5vw, 4.5rem);
  --h3:      clamp(1.5rem, 3vw, 2.2rem);
  --body:    clamp(1rem, 1.2vw, 1.25rem);
  --eyebrow: 0.78rem;

  /* ---- Ritmo e layout ---- */
  --section-pad: clamp(6rem, 12vh, 12rem);
  --maxw:        1280px;
  --gutter:      clamp(1.25rem, 5vw, 3rem);
  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   28px;

  /* ---- Motion (curvas fortes, não as fracas do CSS padrão) ---- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.16s;
  --dur:        0.28s;
  --dur-slow:   0.55s;

  /* ---- Sombras em camadas (tingidas de escuro, adaptam ao fundo) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 12px 28px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.4);
  /* highlight interno de 1px no topo: simula aresta iluminada */
  --edge-top: inset 0 1px 0 rgba(244,245,242,0.06);
  /* glow accent contido (não neon) */
  --glow-accent: 0 6px 26px -10px rgba(91,254,80,0.5);

  /* ---- Camadas (z-index) ---- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-header:  40;
  --z-overlay: 100;

  /* ---- Estado dinâmico do fundo da página (trocado via scroll) ---- */
  --page-bg: var(--bg-onyx);
}

/* Fundo da página transiciona suavemente entre onyx e verde profundo */
html {
  background-color: var(--page-bg);
  transition: background-color 0.6s var(--ease-out);
}