/* ============================================================
   TOKENS — CA Salão de Beleza
   Única fonte de verdade para cor, tipografia e espaçamento.
   NUNCA usar hex literal fora deste arquivo.
   ============================================================ */

:root {
  /* ---- Paleta oficial (definida pelo cliente) ---- */
  --cor-roxo: #4A154B;          /* EXCLUSIVO da seção DoTerra */
  --cor-preto: #111111;         /* fundo base do site */
  --cor-dourado: #D4AF37;       /* CTAs, destaques, linhas */
  --cor-creme: #F5E6CC;         /* tipografia e detalhes */

  /* ---- Derivadas (transparências e variações das oficiais) ---- */
  --cor-preto-suave: #181614;            /* cartões e superfícies elevadas */
  --cor-preto-profundo: #0B0A09;         /* faixas de contraste */
  --cor-roxo-profundo: #340E35;          /* gradiente da seção DoTerra */
  --cor-dourado-claro: #E8CC6E;          /* hover de elementos dourados */
  --cor-creme-60: rgba(245, 230, 204, 0.60);  /* texto secundário */
  --cor-creme-30: rgba(245, 230, 204, 0.30);  /* texto terciário, legendas */
  --cor-creme-12: rgba(245, 230, 204, 0.12);  /* bordas e divisores */
  --cor-creme-06: rgba(245, 230, 204, 0.06);  /* fundos sutis */
  --cor-dourado-35: rgba(212, 175, 55, 0.35); /* bordas douradas suaves */
  --cor-dourado-12: rgba(212, 175, 55, 0.12); /* brilho/glow discreto */

  /* ---- Tipografia ---- */
  --fonte-display: "Fraunces", "Georgia", serif;
  --fonte-corpo: "Outfit", "Helvetica Neue", sans-serif;

  --texto-xs: 0.75rem;      /* 12px — legendas, kickers */
  --texto-sm: 0.875rem;     /* 14px — apoio */
  --texto-base: 1.0625rem;  /* 17px — corpo */
  --texto-lg: 1.375rem;     /* 22px — lead */
  --texto-xl: 1.75rem;      /* 28px — subtítulos */
  --texto-2xl: clamp(2rem, 4vw, 3rem);          /* títulos de seção */
  --texto-hero: clamp(2.75rem, 8vw, 6.5rem);    /* headline do hero */

  --tracking-largo: 0.32em; /* kickers em caps */

  /* ---- Espaçamento (escala de 8) ---- */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2rem;
  --esp-5: 3rem;
  --esp-6: 4.5rem;
  --esp-7: 6rem;
  --esp-secao: clamp(5rem, 12vh, 9rem);  /* respiro vertical entre seções */

  /* ---- Layout ---- */
  --largura-max: 72rem;
  --raio-sutil: 2px;        /* estética sharp, quase sem arredondamento */

  /* ---- Movimento ---- */
  --transicao: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transicao-lenta: 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}