/* ==========================================================
   VYNEX — Design tokens
   Cores tiradas da logo oficial (gradiente do "V" e acento do "X").
   ========================================================== */
@property --wipe {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}

:root {
  /* Base */
  --c-bg:        #000000;   /* mesmo preto do fundo da logo */
  --c-surface-1: #04071A;   /* painéis */
  --c-surface-2: #080E2C;   /* cards */
  --c-surface-3: #0E1640;   /* elevação / hover */
  --c-line:      rgba(128, 152, 255, .14);
  --c-line-2:    rgba(128, 152, 255, .28);

  /* Texto (contraste AA sobre #000 e sobre --c-surface-2) */
  --c-text:   #F2F4FA;
  --c-text-2: #AEB6CC;
  --c-text-3: #8891AA;

  /* Marca — amostrados da logo */
  --c-azure:  #1D95FD;   /* topo da haste esquerda do V */
  --c-cobalt: #2A60FC;   /* meio do V */
  --c-indigo: #3836F1;   /* base do V */
  --c-violet: #4A46FF;   /* haste direita / acento do X */
  --c-deep:   #041EA1;   /* dobra do V */
  --c-sky:    #9CC8FF;   /* realces sobre fundo escuro */

  --grad-v: linear-gradient(155deg, var(--c-azure) 0%, var(--c-cobalt) 48%, var(--c-indigo) 100%);
  /* Versão para fundos com texto branco: contraste mínimo 4,6:1 em todo o gradiente */
  --grad-btn: linear-gradient(155deg, #1A6CF0 0%, var(--c-cobalt) 48%, var(--c-indigo) 100%);
  --grad-v-soft: linear-gradient(155deg, rgba(29,149,253,.18), rgba(56,54,241,.18));

  /* Tipografia
     Anybody: títulos, em largura expandida (eixo wdth), ecoando o lettering largo da logo.
     Hanken Grotesk: texto corrido. */
  --f-display: "Anybody", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-text:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --stretch-display: 118%;
  --stretch-label:   108%;

  --fs-hero:  clamp(2.3rem, 1rem + 3.9vw, 4.6rem);
  --fs-h2:    clamp(1.95rem, 1.25rem + 2.7vw, 3.6rem);
  --fs-h3:    clamp(1.2rem, 1.06rem + .6vw, 1.55rem);
  --fs-lead:  clamp(1.06rem, 1rem + .3vw, 1.25rem);
  --fs-body:  1.0625rem;
  --fs-small: .9375rem;
  --fs-xs:    .8125rem;

  --lh-tight: 1.02;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  /* Espaço e grade */
  --gutter: clamp(1.25rem, .55rem + 2.8vw, 3rem);
  --maxw: 1320px;
  --space-section: clamp(5.5rem, 3rem + 9vw, 10.5rem);
  --header-h: 76px;

  /* Raios com hierarquia: botões pílula, cards grandes, janelas menores */
  --r-chip: 8px;
  --r-window: 12px;
  --r-card: 22px;
  --r-panel: 30px;
  --r-pill: 999px;

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur-1: .18s;
  --dur-2: .38s;
  --dur-3: .7s;
  --dur-4: 1.1s;

  /* Ângulo das hastes do V da logo: usado em cortes, varreduras e no processo */
  --angle-v: 58deg;

  /* Camadas */
  --z-header: 50;
  --z-float: 40;
  --z-menu: 60;
  --z-cursor: 100;
}

@media (max-width: 719px) {
  :root {
    --header-h: 64px;
    --stretch-display: 108%;
  }
}