/* ==========================================================================
   Colorê — tokens de design
   Cores extraídas da logo + neutros quentes. Para trocar uma cor, edite só
   este arquivo: o restante do CSS usa apenas estas variáveis.
   ========================================================================== */

/* ---------- Fontes (auto-hospedadas, subconjunto latino) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/caveat.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tema claro (padrão) ---------- */
:root {
  color-scheme: light;

  /* Cores da marca (extraídas da logo) — usadas em manchas, pinceladas e detalhes */
  --brand-1: #F5279C; /* magenta */
  --brand-2: #2EC5E2; /* ciano   */
  --brand-3: #8031C0; /* roxo    */
  --brand-4: #F8D82C; /* amarelo */
  --magenta: var(--brand-1);
  --ciano: var(--brand-2);
  --roxo: var(--brand-3);
  --amarelo: var(--brand-4);

  /* Versões "tinta" das cores da marca: escurecidas para serem legíveis como texto (AA) */
  --magenta-ink: #BE0F73;
  --ciano-ink: #0B6E83;
  --roxo-ink: #7A2DB8;
  --amarelo-ink: #806000;

  /* Neutros */
  --bg: #FBF7F1;          /* papel off-white quente */
  --surface: #FFFDF9;
  --surface-2: #F3ECE2;
  --text: #211A2B;        /* tinta escura */
  --text-muted: #625A6C;
  --line: #E6DDD1;
  --line-strong: #8C7E6D;

  --accent: var(--roxo-ink);
  --accent-contrast: #FFFFFF;
  --focus: var(--roxo-ink);

  --shadow: 0 1px 2px rgba(33, 26, 43, 0.06), 0 10px 28px -12px rgba(33, 26, 43, 0.18);
  --shadow-lg: 0 2px 6px rgba(33, 26, 43, 0.08), 0 28px 60px -20px rgba(33, 26, 43, 0.32);

  /* WhatsApp: verde reconhecível, um pouco mais profundo para conversar com a paleta */
  --wa: #127A47;
  --wa-hover: #0E683C;
  --wa-contrast: #FFFFFF;

  /* Carta (sidebar) e envelope */
  --paper: #FFFCF6;
  --paper-2: #F6EEDF;
  --paper-ink: #2A2233;
  --paper-muted: #6A6070;
  --paper-line: #E2D5C0;
  --paper-accent: #7A2DB8;
  --envelope: #EBDFCB;
  --envelope-2: #DCCCB2;
  --envelope-line: #C9B797;

  --veil: rgba(26, 19, 34, 0.46);
  --lb-bg: #15111B;
  --lb-text: #F4EEE6;
  --lb-muted: #B9AFBF;

  --blob-opacity: 0.17;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .25 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- Tipografia ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h2: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(4rem, 2.6rem + 7vw, 8.25rem);
  --fs-lema: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --lh: 1.6;

  /* ---------- Espaços, raios, movimento ---------- */
  --gutter: clamp(1rem, 0.55rem + 2.2vw, 2.25rem);
  --maxw: 1180px;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;

  --topbar-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ---------- Tema escuro: grafite azul-petróleo, marca mais luminosa ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-1: #FF4FAE;
  --brand-2: #45D3EC;
  --brand-3: #A774E6;
  --brand-4: #F2D24B;

  --magenta-ink: #FF6FBC;
  --ciano-ink: #5AD5EC;
  --roxo-ink: #C29BF2;
  --amarelo-ink: #F2D24B;

  --bg: #121A21;
  --surface: #19242D;
  --surface-2: #213039;
  --text: #F2ECE3;
  --text-muted: #ADA59F;
  --line: #2B3944;
  --line-strong: #6E7E8C;

  --accent: var(--ciano-ink);
  --accent-contrast: #0E161C;
  --focus: var(--ciano-ink);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 70px -20px rgba(0, 0, 0, 0.75);

  /* Papel de pergaminho: nunca branco brilhante no escuro */
  --paper: #E6DAC2;
  --paper-2: #D9CAAD;
  --paper-ink: #2A2233;
  --paper-muted: #5A5060;
  --paper-line: #C7B592;
  --envelope: #BBA98A;
  --envelope-2: #A79676;
  --envelope-line: #8E7D5E;

  --veil: rgba(4, 8, 11, 0.62);
  --lb-bg: #0C1217;

  --blob-opacity: 0.13;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .88 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}