/* ============================================================================
   WEBSALES.BC — tokens.css
   O contrato de design. Todo site gerado herda daqui.

   Regra que sustenta o padrão: neutros quentes + UM acento.
   O acento é metal — fio, borda, título, botão. Nunca fundo de seção inteira.

   Cada cliente sobrescreve APENAS os 11 valores marcados [MARCA] em brand.css.
   O resto (escala, ritmo, motion) é o padrão da casa e não se negocia.
   ============================================================================ */

:root {
  /* ── Superfícies [MARCA] ───────────────────────────────────────────────────
     O site alterna escuro → claro por seção. Nunca por gradiente.            */
  --deep: #0f0d08;        /* fundo cinematográfico — hero, fechamento        */
  --deep-soft: #1a1610;   /* superfície elevada sobre o escuro               */
  --light: #f3eee4;       /* fundo editorial claro — corpo do site           */
  --light-soft: #faf7f0;  /* superfície elevada sobre o claro                */

  /* ── Texto [MARCA] ─────────────────────────────────────────────────────────
     Secundários são TINTADOS da superfície. Cinza puro mata o padrão.        */
  --ink: #221d13;         /* texto sobre claro                               */
  --ink-soft: #5d5544;    /* secundário sobre claro                          */
  --pale: #f3eee4;        /* texto sobre escuro                              */
  --pale-soft: #cfc5ae;   /* secundário sobre escuro                         */

  /* ── Acento único [MARCA] ──────────────────────────────────────────────────
     Três tons do MESMO acento. Não é uma segunda cor de marca.               */
  --accent: #c6a55c;         /* fios, bordas, CTA                            */
  --accent-bright: #e6c987;  /* hover, e texto de acento sobre escuro        */
  --accent-deep: #6b5a2b;    /* texto pequeno sobre claro — garante AA       */

  /* Texto POR CIMA do preenchimento de acento. Calculado por contraste, não
     escolhido no olho: marca amarela pede texto escuro, marca vinho pede texto
     claro, e o botão precisa funcionar nas duas sem ninguém pensar nisso.   */
  --accent-on: #0f0d08;
  --accent-bright-on: #0f0d08;

  /* ── Hairlines ─────────────────────────────────────────────────────────────
     1px é a unidade de precisão. Substituem bordas pesadas em todo lugar.    */
  --hairline: color-mix(in srgb, var(--accent) 32%, transparent);
  --hairline-ink: color-mix(in srgb, var(--ink) 18%, transparent);
  --hairline-pale: color-mix(in srgb, var(--pale) 16%, transparent);

  /* ── Tipografia [MARCA: as 3 famílias] ─────────────────────────────────────
     Display de alto contraste em caixa-alta espaçada + sans geométrica leve.
     A serif editorial entra só em legenda/citação curta.                     */
  --font-display: 'Italiana', 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, -apple-system, sans-serif;
  --font-editorial: 'Bodoni Moda', Georgia, serif;

  --display-tracking: 0.06em;  /* [MARCA] serifas altas pedem 0.04–0.10em     */
  --body-weight: 300;          /* [MARCA] 300 para sans leve, 400 se pesada   */

  /* Escala fluida — clamp em todos os níveis, sem breakpoint de fonte.       */
  --fs-display-xl: clamp(2.6rem, 7vw, 5.75rem);
  --fs-display-lg: clamp(2rem, 4.5vw, 3.6rem);
  --fs-display-md: clamp(1.5rem, 3vw, 2.4rem);
  --fs-display-sm: clamp(1.15rem, 2vw, 1.5rem);
  --fs-body-lg: clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-label: 0.72rem;
  --fs-fine: 0.8rem;

  --label-tracking: 0.18em;
  --measure: 62ch;        /* medida de corpo — legibilidade acima de largura  */

  /* ── Motion ────────────────────────────────────────────────────────────────
     Exponencial out em tudo. O movimento é material, não enfeite.            */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 0.35s;
  --dur-med: 0.7s;
  --dur-slow: 1.1s;

  /* ── Ritmo espacial ────────────────────────────────────────────────────────
     Duas variáveis governam o respiro do site inteiro.                       */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 11vh, 8.5rem);
  --max-w: 1440px;

  /* ── Cantos ────────────────────────────────────────────────────────────────
     0 por padrão: precisão. Marcas acolhedoras (pet, infantil) sobem p/ 4px. */
  --radius: 0px;          /* [MARCA] */

  /* ── Sombra ────────────────────────────────────────────────────────────────
     Offset-y + blur no tom do fundo. Nunca halo colorido.                    */
  --shadow-soft: 0 18px 44px -22px color-mix(in srgb, var(--ink) 45%, transparent);
  --shadow-lift: 0 28px 64px -28px color-mix(in srgb, var(--ink) 55%, transparent);

  /* ── Camadas ───────────────────────────────────────────────────────────────*/
  --z-nav: 200;
  --z-overlay: 300;
  --z-preloader: 400;
}

/* Marcas que definem um acento frio/escuro ganham AA no claro automaticamente
   ao declarar --accent-deep. Este fallback evita texto ilegível se esquecerem. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --hairline: rgba(198, 165, 92, 0.32);
    --hairline-ink: rgba(34, 29, 19, 0.18);
    --hairline-pale: rgba(243, 238, 228, 0.16);
  }
}