/* Design tokens — Boutique Studio
   Derivados do Manual de Identidade Visual v1.0 (docs/marca).
   Nenhum valor de cor ou fonte deve aparecer solto no resto do CSS. */

:root {
  /* ── Paleta (Manual, seção 03) ───────────────────────────────────────
     Proporção-guia: 90% preto, 8% neutros, 2% bronze.
     Bronze nunca em bloco grande — é fio, filete e detalhe. */
  --preto-palco:     #141311;
  --preto-profundo:  #1a1a1a;
  --bronze:          #a68a6d;
  --bronze-escuro:   #8c7355;
  --areia:           #d9cdbb;
  --offwhite:        #f2ede3;

  /* ── Papéis ─────────────────────────────────────────────────────────
     Bronze sobre Preto Palco dá 6.05:1 — passa AA em corpo de texto.
     Off-white é o padrão para leitura longa. */
  --fundo:           var(--preto-palco);
  --superficie:      var(--preto-profundo);
  --superficie-alta: #221f1a;
  --texto:           var(--offwhite);
  --texto-suave:     rgb(242 237 227 / 0.62);
  --texto-tenue:     rgb(242 237 227 / 0.38);
  --acento:          var(--bronze);

  /* O filete de 1px do manual: divide, sublinha, emoldura. */
  --filete:          rgb(166 138 109 / 0.26);
  --filete-forte:    rgb(166 138 109 / 0.55);

  /* Protection gradient — garante leitura sobre foto e mantém a proporção
     "90% preto" mesmo com fotografia clara. Duas camadas: vertical (texto
     encosta embaixo, nav em cima) e lateral (texto alinha à esquerda). */
  --protecao:
    linear-gradient(
      to right,
      rgb(20 19 17 / 0.55) 0%,
      rgb(20 19 17 / 0.25) 45%,
      rgb(20 19 17 / 0.05) 100%
    ),
    linear-gradient(
      to top,
      rgb(20 19 17 / 0.92) 0%,
      rgb(20 19 17 / 0.70) 28%,
      rgb(20 19 17 / 0.54) 52%,
      rgb(20 19 17 / 0.42) 78%,
      rgb(20 19 17 / 0.62) 100%
    );

  /* ── Tipografia (Manual, seção 04) ──────────────────────────────────
     Marcellus não entra aqui: é exclusiva do logo, que é SVG. */
  --fonte-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --fonte-corpo:   'Hanken Grotesk', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, sans-serif;

  /* Escala fluida. Os limites vêm da tabela do manual:
     display 64–96px · título 28–44px · corpo 16–18px · rótulo 12–14px. */
  --t-display: clamp(2.75rem, 6.4vw, 6rem);
  --t-titulo:  clamp(1.75rem, 3.2vw, 2.75rem);
  --t-sub:     clamp(1.25rem, 2vw, 1.6rem);
  --t-corpo:   clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-rotulo:  clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);

  --tracking-rotulo: 0.28em;   /* rótulos em versalete espaçado */
  --tracking-display: -0.015em;

  /* ── Ritmo e medida ─────────────────────────────────────────────────
     "Menos elementos, mais respiro" — o respiro é generoso por decisão. */
  --gutter:       clamp(1.25rem, 5vw, 4rem);
  --secao:        clamp(4.5rem, 11vw, 9.5rem);
  --largura-max:  1320px;
  --largura-texto: 62ch;

  /* ── Movimento ──────────────────────────────────────────────────────
     Lento e discreto. Nada saltita. */
  --transicao:      280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transicao-lenta: 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}