/* ==========================================================================
   IDENTIDADE VISUAL — o único arquivo de estilo que muda quando o José
   mandar logo, cores e fontes. O resto do CSS só lê estas variáveis.
   Guia completo: ../../COMO-TROCAR.md
   ========================================================================== */

/* 1) FONTES — hospedadas no próprio site (mais rápido e sem enviar o IP do
   visitante ao Google). Para trocar: coloque os .woff2 do José em
   assets/brand/fonts/, ajuste os @font-face abaixo e os nomes em --font-*. */
@font-face {
  font-family: "Archivo";
  src: url("../assets/brand/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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("../assets/brand/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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;
}
@font-face {
  font-family: "Zeyada";
  src: url("../assets/brand/fonts/zeyada-latin.woff2") format("woff2");
  font-weight: 400;
  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: "Zeyada";
  src: url("../assets/brand/fonts/zeyada-latin-ext.woff2") format("woff2");
  font-weight: 400;
  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 {
  /* Família de títulos / palavras-chave (o "bold" da marca) */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 800;
  --display-stretch: 112%;    /* largura: 112% expandida. Fonte sem eixo de largura: use 100% */
  --display-stretch-max: 125%; /* usado no "OFF GRID" gigante. Fonte sem eixo de largura: use 100% */
  --display-tracking: -0.035em;

  /* Família do texto corrido */
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Pesos usados no site. Se a fonte do José for estática (arquivos separados
     por peso), deixe aqui só os pesos que existem nos arquivos dele. */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Família manuscrita (numeração, notas, "assistir") */
  --font-hand: "Zeyada", "Segoe Script", cursive;

  /* 2) CORES */
  --bg: #ffffff;          /* fundo principal */
  --bg-alt: #f1f1f0;      /* cinza claro: seções alternadas, campos */
  --ink: #0a0a0a;         /* texto e botões */
  --ink-2: #5a5a58;       /* texto secundário (contraste 6.9:1 no branco) */
  --ink-3: #8a8a86;       /* lista de serviços em repouso (3.4:1, só texto grande; fica preto no hover) */
  --line: #dadad7;        /* fios e divisórias */
  --accent: #19b35a;      /* cor de destaque (preenchimentos; texto preto por cima) */
  --accent-ink: #0c7d40;  /* destaque quando é TEXTO sobre branco (contraste 5.2:1) */
  --accent-soft: rgba(25, 179, 90, 0.12); /* halo do cursor: mesma cor do --accent, transparente */
  --rec: #e5322d;         /* ponto "ao vivo" do relógio */
  --on-media: #ffffff;    /* texto sobre foto/vídeo */

  /* 3) LOGO E SÍMBOLO
     - Logo (texto da marca no topo): js/data.js → marca.logo
     - Símbolo (a "grade" pequena usada no topo, bastidores e Trabalhos):
       troque o arquivo abaixo por um SVG de UMA cor do José. */
  --simbolo-url: url("../assets/brand/simbolo.svg");
  --logo-height: 22px;

  /* 4) FORMA */
  --radius-pill: 999px;
  --radius-field: 6px;
}