/* ============================================================
   VinTimTim — Design Tokens (v2)
   Source: Claude Design "VinTimTim Design System"
   (assets/claude-hands-on/.../tokens/*.css)
   Ver docs/specs/reskin-design-system-v2.md.

   Adotado o vocabulário do design novo (--font-*, --fs-*, --space-*,
   --radius-*, --shadow-*, --ease-*, paleta de sabor). Carregados de volta
   do sistema antigo, porque o design novo não os tem e o projeto os ganhou
   no suor: (1) o anel de foco de DUAS FACES e (2) a escala mobile.
   ============================================================ */

/* --- ITC Avant Garde Gothic Std — face de marca, self-hosted ---
   Registrada como "Avant Garde" (nome que o design novo referencia).
   Jost (CDN, ADR-0006) SAI: era fallback "até self-host"; as TTF estão
   self-hosted, então a função dele acabou — e import de CDN contraria a
   postura offline do projeto (ver O2 da spec). Fallback agora é system. */
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-XLt.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-XLt.ttf") format("truetype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-XLtObl.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-XLtObl.ttf") format("truetype");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-Bk.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-Bk.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-BkObl.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-BkObl.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-Md.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-Md.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-MdObl.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-MdObl.ttf") format("truetype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-Demi.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-Demi.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-DemiObl.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-DemiObl.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-Bold.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Avant Garde";src:url("../assets/fonts/ITCAvantGardeStd-BoldObl.woff2") format("woff2"),url("../assets/fonts/ITCAvantGardeStd-BoldObl.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}

:root{
  /* ---- Core brand palette (Brandbook, 5 cores) ---- */
  --tiffany-claro:#D7FFFA;   /* menta clara — fundo de página global */
  --tiffany-medio:#2ABEAF;   /* teal da marca — logo, superfícies primárias */
  --tiffany-escuro:#287A7D;  /* teal profundo — suporte, secundário */
  --azul-petroleo:#0F2D31;   /* petróleo — texto, CTA primário */
  --rosa-dusty:#C89D9C;      /* rosa — acento suave */

  /* ---- Tints & shades derivados ---- */
  --tiffany-medio-600:#22A99B;
  --tiffany-medio-700:#1C8E82;
  --tiffany-claro-200:#EAFFFC;   /* quase-branco menta pra card sobre fundo tingido */
  --rosa-dusty-600:#B0817F;
  --rosa-dusty-700:#8F5B59;  /* rosa que lê: 5.5:1 no branco, 5.1:1 na menta (selo "aguardando cliente") */
  --rosa-dusty-100:#F0E4E3;
  --petroleo-800:#0A2023;

  /* ---- Neutros (frios, afinados ao mundo menta) ---- */
  --white:#FFFFFF;
  --ink:#0F2D31;             /* texto de corpo = petróleo */
  --ink-soft:#3C5D60;        /* petróleo suavizado — mede 4.9:1 sobre branco */
  --line:#B9E6E0;            /* hairline sobre menta */
  --line-strong:#8FD4CB;

  /* ---- Feedback de formulário (erro por campo, S-52) ---- */
  --danger:#C0362C;          /* vermelho legível sobre input claro (5.9:1 no branco) */
  --danger-on-dark:#FF9B8A;  /* claro, pra texto de erro sobre painel escuro (.on-ink) */

  /* ---- Acentos de sabor (das artes de produto) ----
     Só em contexto de produto, NUNCA como cor de interface. */
  --flavor-morango:#F2A9BE;
  --flavor-tinto:#3E1524;
  --flavor-branco:#EFE9C4;
  --flavor-abacaxi:#EFE07A;
  --flavor-rose-seco:#F4C9BC;
  --flavor-melancia:#F0442E;
  --flavor-rose-suave:#F3B6A8;
  --flavor-tropical:#F5A623;
  --flavor-pessego:#F2D9A0;

  /* ---- Aliases semânticos ---- */
  --bg-page:var(--tiffany-claro);
  --bg-elevated:var(--white);
  --bg-brand:var(--tiffany-medio);
  --bg-brand-deep:var(--tiffany-escuro);
  --bg-ink:var(--azul-petroleo);
  --text-body:var(--ink);
  --text-muted:var(--ink-soft);
  --text-on-brand:var(--tiffany-claro);
  --text-on-ink:var(--tiffany-claro);
  --text-inverse:var(--white);
  --surface-card:var(--white);
  --surface-card-mint:var(--tiffany-claro-200);
  --border-subtle:var(--line);
  --border-strong:var(--line-strong);
  --accent:var(--rosa-dusty);
  --cta-bg:var(--azul-petroleo);
  --cta-text:var(--tiffany-claro);

  /* ---- Anel de foco de DUAS FACES (preservado do projeto) ----
     Nenhuma cor sozinha atinge 3:1 (WCAG 2.2 não-textual) contra as 4
     superfícies: Rosa Dusty morre no header (1.04:1), Petróleo morre na
     banda escura (1.00). Por isso o anel tem duas faces — outline Petróleo
     + box-shadow Tiffany Claro — e cada superfície é salva por uma. NÃO
     trocar pelo anel de 1 cor do design novo. Ver DESIGN.md. */
  --focus-ring:var(--azul-petroleo);
  --focus-ring-contrast:var(--tiffany-claro);

  /* ---- Tipografia ---- */
  --font-display:"Avant Garde","Century Gothic","Futura",system-ui,sans-serif;
  --font-body:"Avant Garde","Century Gothic","Futura",system-ui,sans-serif;

  --fw-xlight:200; --fw-book:400; --fw-medium:500; --fw-demi:600; --fw-bold:700;

  --fs-display:clamp(3rem,6vw,5rem);
  --fs-h1:2.75rem;
  --fs-h2:2rem;
  --fs-h3:1.5rem;
  --fs-h4:1.25rem;
  --fs-lg:1.1875rem;
  --fs-body:1.0625rem;
  --fs-sm:0.875rem;
  --fs-xs:0.75rem;

  --lh-tight:1.02; --lh-snug:1.15; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.04em;

  /* ---- Espaçamento (base 4px) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* ---- Radii — macio e arredondado (boca da taça, selos redondos) ---- */
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px;
  --radius-pill:999px; --radius-circle:50%;

  /* ---- Sombras — suaves, tingidas de petróleo, nunca preto ---- */
  --shadow-sm:0 1px 2px rgba(15,45,49,.06),0 1px 3px rgba(15,45,49,.08);
  --shadow-md:0 4px 12px rgba(15,45,49,.10),0 2px 4px rgba(15,45,49,.06);
  --shadow-lg:0 14px 34px rgba(15,45,49,.14),0 4px 10px rgba(15,45,49,.08);
  --shadow-brand:0 12px 30px rgba(42,190,175,.30);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);

  /* ---- Glass — parcimônia: hero, overlay sobre foto ---- */
  --glass-bg:rgba(255,255,255,.22);
  --glass-bg-strong:rgba(255,255,255,.34);
  --glass-border:1px solid rgba(255,255,255,.55);
  --glass-blur:blur(14px) saturate(160%);
  --shadow-glass:0 8px 30px rgba(15,45,49,.16),inset 0 1px 0 rgba(255,255,255,.7);

  /* ---- Motion — rápido, desaceleração suave (sem bounce; ver audit 2026-07-23) ---- */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:360ms;

  /* ---- Layout ---- */
  --container:1200px;
  --container-narrow:820px;
}

/* Escala mobile (preservada do projeto). O design novo só tem clamp no
   display; o resto ficava fixo e estourava em 320/375. */
@media (max-width:640px){
  :root{
    --fs-h1:2rem;
    --fs-h2:1.6rem;
    --fs-h3:1.3rem;
    --fs-lg:1.125rem;
  }
}

/* Sem animação para quem pediu (reduced motion). */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; }
}