/* ==========================================================================
   Bossa Capixaba — Design Tokens
   Extraídos do mockup SITE BOSSA_-compactado.pdf (amostragem de pixel)
   ========================================================================== */

:root {
  /* Cor — marca (amostrados do PDF) */
  --color-pink: #DB547C;         /* rosa principal: CTAs, botões, cards de destaque */
  --color-pink-light: #F083A3;   /* rosa claro: logo "bossa", pills, bordas de tag */
  --color-teal: #407886;         /* azul-petróleo: títulos, corpo de texto, cards escuros */
  --color-teal-deep: #235166;    /* teal escuro do CTA final sobre foto */
  --color-blue: #4B9EC3;         /* azul da marca: logo "capixaba", subtítulos, pills */
  --color-cyan: #4B9EC3;         /* alias legado (usado pelo painel) */

  /* Cor — neutros */
  --color-white: #FFFFFF;
  --color-cream: #F7F4F1;        /* fundo da marca: header, footer, seções e cards */
  --color-bg-soft: #F7F4F1;      /* alias legado */
  --color-bg-soft-2: #E4E9E7;
  --color-border: #C8DDE1;
  --color-text: #407886;         /* corpo de texto padrão (monocromático teal) */
  --color-text-muted: #7C9AA3;
  --color-star: #407886;         /* estrelas de avaliação são teal no mockup */

  /* Estado */
  --color-success: #2EC4B6;
  --color-danger: #DB547C;
  --color-warning: #F083A3;

  /* Tipografia
     body     — Creato Display, fonte oficial da marca (auto-hospedada em fonts.css)
     display  — o mockup usa uma serifada "wonky" de peso irregular (a mesma do logo),
                que não veio na pasta de assets. Fraunces (eixos SOFT/WONK) é o
                substituto livre mais próximo; trocar aqui quando o arquivo chegar. */
  --font-body: 'Creato Display', 'Helvetica Neue', Arial, -apple-system, sans-serif;
  --font-display: 'Fraunces', 'Big Caslon', Georgia, serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;
  --fs-4xl: 4.5rem;

  /* Espaçamento — escala de 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* Raios */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Sombra */
  --shadow-sm: 0 2px 8px rgba(64, 120, 134, 0.08);
  --shadow-md: 0 8px 24px rgba(64, 120, 134, 0.14);

  /* Layout */
  --header-height: 84px;
  --container-max: 1440px;
  --container-mobile: 430px;
  --curve-height: 120px;         /* altura dos arcos que separam as seções */

  /* Transições */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;
}