/* ==========================================================================
   Viviê Eventos & Design — tokens do sistema visual
   v1.2 · 28/10/2026 · Maya (design de marca) · paleta APROVADA pela Viviane a 28/10/2026

   Paleta mista: mantém o papel cru e a areia como fundos da v1.1 e integra as
   dez cores propostas pela Viviane. O "Fumo" (#6E6157) foi rejeitado e saiu;
   o texto secundário passou a siena #934E39 (5,25:1 sobre papel cru).

   Fonte única de verdade para o site, materiais digitais e impressos
   gerados a partir da web. Ver marca/sistema-visual.md e
   marca/acessibilidade-contraste.md.

   Convenções
   ----------
   · prefixo --vv- em tudo, para não colidir com bibliotecas de terceiros;
   · os tokens *base* (cor, tipografia, espaço) nunca mudam de sentido;
   · os tokens *semânticos* (fundo, texto, ação) dizem onde a cor é usada
     e são os únicos que os componentes devem consumir;
   · qualquer alteração de cor tem de ser revalidada em
     marca/ferramentas/verificar-contraste.py.

   Registo de alterações
   ---------------------
   v1.2 · paleta mista com as cores da Viviane; sai o fumo, sai o barro
          (#9C5337) e o verde-pinho (#2F4438); entrada de osso, siena,
          argila, tijolo, bordô, oliva, ardósia e taupe; modo noite passa a
          usar o verde-noite #1D2819 em vez do preto #14100F;
          --vv-superficie passa de branco-cal para osso.
   v1.0 · primeira versão (direção "Luz de ateliê").
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- COR */
  /* Base — as dez cores da Viviane + papel cru. As proporções somam 100 %
     e estão repetidas em marca/paleta-tipografia.html. */

  /* Fundos — 59 % */
  --vv-papel: #f4ebde;    /* fundo dominante · 39 % */
  --vv-areia: #e3d5c1;    /* faixas e fundos alternativos · 12 % */
  --vv-osso: #c4bca8;     /* cartões, blocos, papel secundário · 8 % */

  /* Tinta — 27 % */
  --vv-nogueira: #3e2a21; /* tinta principal, logótipo · 18 % */
  --vv-siena: #934e39;    /* texto secundário (substitui o fumo) · 6 % */
  --vv-argila: #a57863;   /* só texto grande e ícones · 3 % */

  /* Acentos — 14 % */
  --vv-tijolo: #7f2c23;   /* acento: links, numeração, etiquetas · 5 % */
  --vv-bordo: #59150e;    /* acento profundo: botão, selo, faixas · 3 % */
  --vv-oliva: #696c49;    /* contraponto: citações, temas · 2 % */
  --vv-ambar: #dfa13f;    /* luz: foco, sublinhados — nunca texto · 2 % */
  --vv-ardosia: #9c937e;  /* legendas no modo noite, estados · 1 % */
  --vv-taupe: #b59d8f;    /* preenchimentos e linhas · 1 % */

  /* Apoio — fora da paleta, não entra nas proporções */
  --vv-verde-noite: #1d2819; /* fundo do modo noite */
  --vv-oliva-escuro: #393c28; /* superfícies do modo noite */
  --vv-branco-trabalho: #fbf7f0; /* branco de impressão/serviço, raro */

  /* Semânticos — claros (por omissão) */
  --vv-fundo: var(--vv-papel);
  --vv-fundo-alt: var(--vv-areia);
  --vv-superficie: var(--vv-osso);
  --vv-superficie-clara: var(--vv-papel);
  --vv-texto: var(--vv-nogueira);
  --vv-texto-suave: var(--vv-siena);      /* 5,25:1 sobre papel */
  --vv-texto-fraco: var(--vv-argila);     /* 3,25:1 — só ≥ 24 px */
  --vv-tinta: var(--vv-nogueira);
  --vv-acento: var(--vv-tijolo);
  --vv-acento-forte: var(--vv-bordo);
  --vv-secundario: var(--vv-oliva);
  --vv-luz: var(--vv-ambar);
  --vv-linha: color-mix(in srgb, var(--vv-siena) 26%, transparent);
  --vv-linha-forte: color-mix(in srgb, var(--vv-nogueira) 42%, transparent);

  /* Ação (botões, links) */
  --vv-acao-fundo: var(--vv-bordo);       /* papel sobre bordô = 11,56:1 */
  --vv-acao-texto: var(--vv-papel);
  --vv-acao-fundo-hover: var(--vv-tijolo); /* papel sobre tijolo = 7,78:1 */
  --vv-acao-texto-hover: var(--vv-papel);
  --vv-link: var(--vv-tijolo);
  --vv-link-hover: var(--vv-bordo);

  /* Nomes antigos — mantidos para não quebrar nada que já os use.
     Não usar em código novo. */
  --vv-branco-cal: var(--vv-branco-trabalho);
  --vv-barro: var(--vv-siena);
  --vv-fumo: var(--vv-siena);
  --vv-verde: var(--vv-oliva);

  /* --------------------------------------------------------- TIPOGRAFIA */
  /* Display: serifa com caráter (eixo "soft"/"wonk" variável).
     Texto: grotesca humanista, muito legível a 15–18 px.
     Ambas SIL Open Font License — podem ser servidas pelo próprio site. */
  --vv-fonte-display: "Fraunces", Georgia, "Times New Roman", serif;
  --vv-fonte-texto: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --vv-fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --vv-peso-leve: 300;
  --vv-peso-normal: 400;
  --vv-peso-medio: 500;
  --vv-peso-forte: 600;

  /* Escala 1,25 sobre base 17 px. */
  --vv-texto-xs: 0.75rem;    /* 12 px · etiquetas, notas legais */
  --vv-texto-s: 0.875rem;    /* 14 px · legendas, metadados */
  --vv-texto-base: 1.0625rem;/* 17 px · corpo */
  --vv-texto-m: 1.3125rem;   /* 21 px · entradotes */
  --vv-texto-l: 1.625rem;    /* 26 px · subtítulos */
  --vv-texto-xl: 2.0625rem;  /* 33 px · h3 */
  --vv-texto-2xl: 2.5625rem; /* 41 px · h2 */
  --vv-texto-3xl: 3.25rem;   /* 52 px · h1 */
  --vv-texto-4xl: clamp(3.25rem, 6vw, 4.75rem); /* hero */

  --vv-altura-linha-apertada: 1.05; /* títulos grandes */
  --vv-altura-linha-titulo: 1.15;
  --vv-altura-linha-corpo: 1.6;
  --vv-espaco-letras-apertado: -0.02em; /* display acima de 40 px */
  --vv-espaco-letras-normal: 0;
  --vv-espaco-letras-largo: 0.14em;     /* versaletes / etiquetas */

  /* ---------------------------------------------------------- ESPAÇAMENTO */
  /* Base 4 px. Usar sempre a escala — nada de valores soltos. */
  --vv-1: 0.25rem;  /*  4 */
  --vv-2: 0.5rem;   /*  8 */
  --vv-3: 0.75rem;  /* 12 */
  --vv-4: 1rem;     /* 16 */
  --vv-5: 1.5rem;   /* 24 */
  --vv-6: 2rem;     /* 32 */
  --vv-7: 2.5rem;   /* 40 */
  --vv-8: 3rem;     /* 48 */
  --vv-9: 4rem;     /* 64 */
  --vv-10: 6rem;    /* 96 */
  --vv-11: 8rem;    /* 128 */

  /* -------------------------------------------------------------- LAYOUT */
  --vv-largura-conteudo: 68rem;  /* 1088 px */
  --vv-largura-texto: 38rem;     /* 608 px — medida confortável de leitura */
  --vv-goteira: var(--vv-5);     /* margem lateral em mobile */
  --vv-goteira-larga: var(--vv-8);

  /* --------------------------------------------------------------- FORMA */
  /* Cantos: o ateliê corta a direito (madeira) e arredonda o papel. */
  --vv-raio-s: 4px;
  --vv-raio-m: 10px;
  --vv-raio-l: 18px;   /* igual ao selo, para haver eco formal */
  --vv-raio-cheio: 999px;

  --vv-borda-fina: 1px;
  --vv-borda-media: 2px;

  /* Sombras: quentes, baixas e difusas. Nada de sombra preta dura. */
  --vv-sombra-1: 0 1px 2px rgba(62, 42, 33, 0.08);
  --vv-sombra-2: 0 2px 8px rgba(62, 42, 33, 0.10);
  --vv-sombra-3: 0 12px 32px rgba(62, 42, 33, 0.14);

  /* ------------------------------------------------------------- MOVIMENTO */
  --vv-transicao-rapida: 120ms ease-out;
  --vv-transicao: 220ms ease-out;
  --vv-transicao-lenta: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ----------------------------------------------------------- FOCO / A11Y */
  /* Foco sempre visível: 2 px de bordô + halo âmbar.
     O âmbar só é usado aqui como traço — nunca como texto. */
  --vv-foco-cor: var(--vv-bordo);
  --vv-foco-halo: var(--vv-ambar);
  --vv-foco-largura: 2px;
}

/* ==========================================================================
   Tema "noite" — usa as duas cores mais escuras da lista da Viviane
   (#1D2819 e #393C28). Só para conteúdo de temas escuros: Halloween,
   festas de adultos, vídeos de cenografia. Nunca é o tema por omissão.
   ========================================================================== */

[data-tema="noite"] {
  --vv-papel: #1d2819;
  --vv-areia: #393c28;
  --vv-osso: #393c28;
  --vv-nogueira: #c4bca8;   /* osso: 8,11:1 sobre verde-noite */
  --vv-siena: #b59d8f;      /* taupe: 5,97:1 */
  --vv-argila: #9c937e;     /* ardósia: 5,03:1 */
  --vv-tijolo: #dfa13f;
  --vv-bordo: #dfa13f;
  --vv-oliva: #9c937e;
  --vv-ambar: #dfa13f;      /* 6,79:1 sobre verde-noite */

  --vv-fundo: var(--vv-verde-noite);
  --vv-fundo-alt: var(--vv-oliva-escuro);
  --vv-superficie: var(--vv-oliva-escuro);
  --vv-superficie-clara: #2a3020;
  --vv-texto: var(--vv-nogueira);
  --vv-texto-suave: var(--vv-siena);
  --vv-texto-fraco: var(--vv-argila);
  --vv-tinta: var(--vv-nogueira);
  --vv-acento: var(--vv-ambar);
  --vv-acento-forte: var(--vv-ambar);
  --vv-luz: var(--vv-ambar);
  --vv-linha: color-mix(in srgb, #c4bca8 20%, transparent);
  --vv-linha-forte: color-mix(in srgb, #c4bca8 38%, transparent);
  --vv-acao-fundo: var(--vv-ambar);
  --vv-acao-texto: var(--vv-verde-noite);
  --vv-acao-fundo-hover: #c4bca8;
  --vv-acao-texto-hover: var(--vv-verde-noite);
  --vv-link: var(--vv-ambar);
  --vv-link-hover: #c4bca8;
  --vv-foco-cor: var(--vv-ambar);
  --vv-sombra-2: 0 2px 10px rgba(0, 0, 0, 0.45);
  --vv-sombra-3: 0 14px 38px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   Impressão — etiquetas, cartões, folhas de sala
   ========================================================================== */

@media print {
  :root {
    --vv-fundo: #ffffff;
    --vv-texto: #000000;
    --vv-texto-suave: #333333;
    --vv-sombra-1: none;
    --vv-sombra-2: none;
    --vv-sombra-3: none;
  }
}

/* ==========================================================================
   Preferência por menos movimento — respeitar sempre
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --vv-transicao-rapida: 0ms;
    --vv-transicao: 0ms;
    --vv-transicao-lenta: 0ms;
  }
}