/* ==========================================================================
   Wood Floor Service LLC — tokens
   Toda cor, fonte, medida e tempo do site sai daqui. Mudar a marca é mudar
   este arquivo. Ordem de carga: tokens.css → base.css → site.css
   ========================================================================== */

/* Archivo variável: um arquivo cobre peso (300–800) e largura (62–125%).
   Largura 125% = títulos (ecoa o letreiro expandido do logo);
   100% = texto corrido. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 62% 125%;
  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;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Cor — marca oficial (#254695, extraído do SVG) e derivados */
  --royal: #254695;        /* azul do logo */
  --royal-deep: #1B3574;   /* hover / pressionado */
  --night: #0E1834;        /* marinho das seções escuras (matiz do royal) */
  --night-2: #16234A;      /* superfícies sobre o marinho */
  --paper: #FFFFFF;
  --mist: #EEF1F7;         /* seções claras alternadas */
  --ink: #0E1526;          /* texto sobre claro — 18:1 */
  --slate: #4E5870;        /* secundário sobre claro — 7,1:1 (branco) · 6,3:1 (mist) */
  --periwinkle: #A9BCF2;   /* destaque sobre marinho — 9,3:1 */
  --fog: #B6C0D8;          /* secundário sobre marinho — 9,6:1 */
  --google-star: #FBBC04; /* amarelo das estrelas do Google (avaliações) */
  --ice: #DCE4FA;          /* texto pequeno sobre royal — 6,9:1 */

  --hair: rgba(14, 21, 38, .14);
  --hair-strong: rgba(14, 21, 38, .32);
  --hair-dark: rgba(255, 255, 255, .14);
  --hair-dark-strong: rgba(255, 255, 255, .34);
  --scrim: rgba(14, 24, 52, .5);
  --scrim-soft: rgba(14, 24, 52, .22);
  --veil: rgba(8, 13, 30, .9);

  /* Tipo */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wide: 125%;
  --semi: 112%;
  --normal: 100%;

  --fs-hero: clamp(2.5rem, 1rem + 5.4vw, 6.4rem);
  --fs-display: clamp(2.2rem, 1rem + 4.6vw, 5.6rem);
  --fs-h2: clamp(1.9rem, 1.05rem + 3vw, 4rem);
  --fs-h3: clamp(1.2rem, 1rem + .7vw, 1.6rem);
  --fs-lead: clamp(1.0625rem, .98rem + .38vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .75rem;

  --lh-tight: .98;
  --lh-title: 1.06;
  --lh-body: 1.62;
  --track-display: -.03em;
  --track-title: -.02em;
  --track-label: .2em;

  /* Espaço e grade */
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --max: 1440px;
  --section-y: clamp(4rem, 2.6rem + 4.6vw, 7.25rem);
  --gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  --nav-h: 76px;
  --bar-h: 64px;
  --radius: 2px;
  --square: 8px;           /* o quadradinho do símbolo */

  /* Formulário no topo (hero) — ajuste aqui */
  --form-hero-largura: 27rem;     /* largura do cartão no desktop */
  --form-hero-respiro: 1.5rem;    /* espaço interno do cartão */
  --form-campo-altura: 2.6rem;    /* altura de cada campo */
  --form-campo-espaco: .7rem;     /* espaço entre os campos */
  --tabua-fresta: 1px;            /* fresta entre as tábuas DURANTE a animação (parada, fecha) */

  /* Tempo */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .22s;
  --t: .5s;
  --t-slow: .95s;
  --stagger: 90ms;
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; }
}