/* =====================================================================
   IDENTIDADE VISUAL — DATA FORCE (conforme o Manual de Identidade Visual)
   Paleta oficial:
     Bright Snow   #F8F8F8  (primária 1)
     Golden Bronze #CFA150  (destaque)
     Indigo Ink    #3E0A6C  (primária 2)
     Dark Amethyst #1E063A  (primária 3)
     Dark Amethyst #13002C  (primária 4)
   Tipografia oficial: Urbanist
   ===================================================================== */
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/Urbanist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Paleta oficial */
  --snow:     #F8F8F8;
  --gold:     #CFA150;
  --indigo:   #3E0A6C;
  --amethyst: #1E063A;
  --amethyst-deep: #13002C;

  /* Papéis no layout */
  --brand:        var(--gold);      /* destaques, botões principais */
  --brand-strong: #E0B868;          /* hover do dourado */
  --brand-2:      var(--indigo);
  --brand-ink:    var(--amethyst-deep); /* texto sobre o dourado */
  --gradient:     linear-gradient(120deg, #CFA150 0%, #E6C27C 100%);
  --gradient-purple: linear-gradient(120deg, #3E0A6C 0%, #13002C 100%);
  --glow-purple:  rgba(122, 52, 214, 0.35); /* brilho violeta usado só em luzes de fundo */

  /* Superfícies (fundo escuro em tons de ametista) */
  --bg:        #13002C;
  --bg-2:      #180334;
  --surface:   #1E063A;
  --surface-2: #28094B;
  --surface-3: #3E0A6C;
  --border:        rgba(196, 170, 255, 0.12);
  --border-strong: rgba(196, 170, 255, 0.22);

  /* Texto */
  --text:   #F8F8F8;
  --text-2: #CDC3DD;
  --muted:  #A497B9;

  /* Estados */
  --ok:      #22c55e;
  --warn:    #fab219;
  --serious: #ec835a;
  --danger:  #ef4444;

  /* Tipografia */
  --font-display: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Urbanist", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Escala fluida: cresce suavemente de 360px até 1920px de largura.
     É isso que evita o site "apertado" em HD (1366px) e "vazio" em Full HD. */
  --fs-xs:   clamp(0.78rem, 0.75rem + 0.10vw, 0.85rem);
  --fs-sm:   clamp(0.88rem, 0.85rem + 0.12vw, 0.97rem);
  --fs-base: clamp(0.98rem, 0.94rem + 0.18vw, 1.12rem);
  --fs-lg:   clamp(1.10rem, 1.02rem + 0.35vw, 1.34rem);
  --fs-xl:   clamp(1.32rem, 1.12rem + 0.80vw, 1.90rem);
  --fs-2xl:  clamp(1.70rem, 1.28rem + 1.60vw, 2.80rem);
  --fs-3xl:  clamp(2.15rem, 1.42rem + 2.95vw, 4.25rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  --space-8: clamp(3.5rem, 2.4rem + 4vw, 7rem);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  --container: min(1240px, 100% - 2 * clamp(1rem, 4vw, 3rem));
  --shadow: 0 10px 40px -12px rgba(5, 0, 15, 0.75);
  --glow: 0 0 0 1px rgba(207, 161, 80, 0.28), 0 14px 44px -12px rgba(122, 52, 214, 0.55);
}

@media (min-width: 1800px) {
  :root { --container: min(1360px, 100% - 6rem); }
}