/* ==========================================================================
   Fael Developer — tokens de design
   ========================================================================== */

/* Bodoni Moda: serifa editorial de alto contraste (títulos, nomes, FAEL DEVELOPER).
   Variável em peso (400–900) e tamanho óptico (6–96). O tamanho óptico fica fixo em 26: no
   automático, nos tamanhos grandes (o nome tem até 220 px) os traços finos quase somem.
   O valor vale também para o texto desenhado em canvas (o nome da Hero). */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-variation-settings: "opsz" 26;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bodoni Moda";
  src: url("../assets/fonts/bodoni-moda-italic-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-variation-settings: "opsz" 26;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Cores (paleta da marca) */
  --void: #010203;          /* fundo principal, quase preto */
  --carbon: #101112;        /* quase preto neutro: superfícies */
  --abyss: #01102b;         /* azul quase preto */
  --navy: #042c61;          /* azul-marinho */
  --volt-deep: #0b4b9c;     /* azul profundo: luzes de fundo */
  --volt: #156ddc;          /* azul principal */
  --volt-alt: #1783e8;      /* azul vivo alternativo */
  --volt-hi: #1d8ff0;       /* azul luminoso: brilhos e destaques */
  --frost: #ecf1ff;         /* branco azulado: textos e interface */
  --silver: #e2e3e4;        /* cinza claro */
  --mist: #92959b;          /* cinza médio: texto auxiliar (contraste 6,7:1 sobre o fundo) */
  --graphite: #4c4d52;      /* cinza escuro: divisores e estados desativados */
  --frost-soft: rgb(236 241 255 / 0.8);
  --line: rgb(236 241 255 / 0.08);
  --line-strong: rgb(236 241 255 / 0.16);
  --glass: rgb(7 12 24 / 0.5);
  --glass-strong: rgb(5 9 19 / 0.78);
  --panel: linear-gradient(180deg, rgb(13 24 46 / 0.55), rgb(4 8 17 / 0.72));

  /* Tipografia */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-micro: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  --fs-h3: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem);
  --fs-section: clamp(3.25rem, 1.6rem + 6.4vw, 8rem);

  /* Alinhamento: uma única régua para cabeçalho, seções e rodapé.
     Margens laterais enxutas: a área útil chega a ~96% da tela no desktop. */
  --container: 1760px;
  --gutter: clamp(1rem, 0.45rem + 1.7vw, 2.25rem);
  --content-w: min(100% - 2 * var(--gutter), var(--container));
  --section-y: clamp(5.5rem, 3.4rem + 7vw, 10rem);
  --stack: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);

  /* Cabeçalho */
  --header-top: 12px;
  --header-h: 60px;
  --header-pad: clamp(8px, var(--gutter) - 8px, 14px); /* o vidro avança além da régua do conteúdo */

  /* Formas */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Luz */
  --glow-soft: 0 10px 40px -18px rgb(29 143 240 / 0.55);
  --glow: 0 0 0 1px rgb(29 143 240 / 0.1), 0 8px 30px -10px rgb(29 143 240 / 0.6);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}