/* ==========================================================================
   Design tokens — Academia Hércules
   Edite cores, tipografia, espaçamentos e motion somente aqui.
   ========================================================================== */

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mr Dafoe";
  src: url("../assets/fonts/mr-dafoe-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color ----------------------------------------------------------------- */
  --ink-1000: #020202;
  --ink-950: #050505;
  --ink-850: #0e0e0e;

  --bone: #eeeae4;
  --bone-2: #bcb7b0;
  --bone-3: #8e8983;

  --red: #e0121c;
  --red-bright: #ff3a3f;
  --gold: #f2c427;

  --line: rgb(238 234 228 / 0.1);
  --line-strong: rgb(238 234 228 / 0.2);

  /* Smoked glass */
  --glass-fill: rgb(12 12 12 / 0.46);
  --glass-edge: rgb(255 255 255 / 0.1);
  --glass-sheen: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 0 0 1px rgb(255 255 255 / 0.02);
  --glass-blur: blur(18px) saturate(140%);

  /* Typography ------------------------------------------------------------ */
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Mr Dafoe", "Brush Script MT", cursive;

  --fs-hero: clamp(4.1rem, 2.4rem + 8.2vw, 11rem);
  --fs-display: clamp(3rem, 1.6rem + 5.6vw, 7.75rem);
  --fs-title: clamp(2.2rem, 1.7rem + 1.6vw, 3.4rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-display: 0.88;
  --lh-body: 1.6;
  --tracking-label: 0.22em;

  /* Space ----------------------------------------------------------------- */
  --gutter: clamp(1.25rem, 0.4rem + 3.8vw, 4.5rem);
  --section-y: clamp(5.5rem, 3rem + 9vw, 11rem);
  --container: 90rem;
  --header-h: 4.5rem;

  /* Shape ----------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-m: 10px;

  /* Motion ---------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 0.22s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;
  --dur-reveal: 1.15s;

  /* Layers ---------------------------------------------------------------- */
  --z-media: 0;
  --z-content: 2;
  --z-header: 50;
  --z-menu: 49; /* abaixo do header, que mantém o botão de fechar visível */
  --z-skip: 90;
  --z-grain: 100;
}

@media (min-width: 64em) {
  :root {
    --header-h: 5.25rem;
  }
}