/* =====================================================================
   TOKENS — a única fonte de cores, fontes e medidas do site.
   Para mudar a paleta, altere apenas este arquivo.
   ===================================================================== */
:root {
  /* Paleta base (valores crus só aqui) */
  --palette-cream: #fff8ee;
  --palette-white: #ffffff;
  --palette-purple-900: #3b2a6b;
  --palette-purple-600: #6b5f8a;
  --palette-pink: #c93a5e;
  --palette-pink-soft: #ffe1e8;
  --palette-pink-deep: #b02f52;
  --palette-blue: #7cc4f5;
  --palette-blue-soft: #e3f3ff;
  --palette-yellow: #ffd166;
  --palette-yellow-soft: #fff3cc;
  --palette-green: #9be29b;
  --palette-green-soft: #e6f8e6;
  --palette-lilac: #c9a7f5;
  --palette-lilac-soft: #f0e6ff;
  --palette-whatsapp: #25d366;
  --palette-whatsapp-dark: #1da851;

  /* Semânticos: componentes usam SOMENTE estes */
  --color-bg: var(--palette-cream);
  --color-surface: var(--palette-white);
  --color-text: var(--palette-purple-900);
  --color-text-muted: var(--palette-purple-600);
  --color-text-on-primary: var(--palette-white);

  --color-primary: var(--palette-pink);
  --color-primary-soft: var(--palette-pink-soft);
  --color-link: var(--palette-pink-deep);
  --color-secondary: var(--palette-blue);
  --color-secondary-soft: var(--palette-blue-soft);
  --color-accent-yellow: var(--palette-yellow);
  --color-accent-yellow-soft: var(--palette-yellow-soft);
  --color-accent-green: var(--palette-green);
  --color-accent-green-soft: var(--palette-green-soft);
  --color-accent-lilac: var(--palette-lilac);
  --color-accent-lilac-soft: var(--palette-lilac-soft);
  --color-icon-blue: #2f8fd6;     /* azul fechado para ícones sobre fundo azul-claro */
  --color-icon-yellow: #d9960a;   /* amarelo fechado para ícones sobre fundo amarelo-claro */
  --color-icon-green: #3f9d4f;    /* verde fechado para ícones sobre fundo verde-claro */
  --color-whatsapp: var(--palette-whatsapp);
  --color-whatsapp-dark: var(--palette-whatsapp-dark);
  --color-border: color-mix(in srgb, var(--color-text) 12%, transparent);
  --color-overlay-light: rgb(255 255 255 / 0.35);
  --color-footer-divider: rgb(255 255 255 / 0.15);

  /* Gradientes */
  --gradient-hero: linear-gradient(135deg, var(--color-secondary-soft) 0%, var(--color-bg) 45%, var(--color-primary-soft) 100%);
  --gradient-instagram: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
  --gradient-text: linear-gradient(90deg, var(--color-primary), var(--color-accent-lilac));

  /* Tipografia */
  --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: clamp(2.4rem, 5vw + 1rem, 3.75rem);
  --leading-tight: 1.15;
  --leading-body: 1.6;

  /* Espaçamento */
  --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;
  --space-9: 6rem;
  --space-10: 8rem;
  --gutter: 1rem;
  --container-max: 1120px;

  /* Formas */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgb(59 42 107 / 0.08);
  --shadow-md: 0 8px 24px rgb(59 42 107 / 0.12);
  --shadow-lg: 0 18px 48px rgb(59 42 107 / 0.16);

  /* Movimento */
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Camadas */
  --z-header: 50;
  --z-fab: 60;
  --z-menu: 70;
}