/* Tokens de design: mude cor/fonte/espaçamento aqui, não nos outros arquivos. */
:root {
  /* Cores de marca (paleta lúdica v2) */
  --color-pink: #FD85B2;
  --color-pink-dark: #E85C93;
  --color-mint: #73C8BD;
  --color-mint-dark: #2E7D74;
  --color-mint-darker: #4FA89C;
  --color-lavender: #7C5FC7;
  --color-lavender-light: #B7A8E8;
  --color-yellow: #FFC64B;
  --color-yellow-dark: #FFB03A;
  --color-ink: #33313F;

  /* Fundos */
  --bg-cream: #FFF8EF;
  --bg-mint-tint: #EAF7F4;
  --bg-mint-soft: #D6F0EC;
  --bg-lavender: #EDE7FB;
  --bg-lavender-tint: #ECE6FA;
  --bg-pink-tint: #FDEFF5;
  --bg-footer: #2E6E66;
  --bg-card: #fff;

  /* Texto */
  --text-heading: #33313F;
  --text-body: #5B5866;
  --text-soft: #7C7889;
  --text-softer: #9A96A8;
  --text-on-dark: #EAFAF7;
  --text-on-mint: #A9D4CD;
  --text-on-footer: #CDE9E4;
  --text-on-footer-soft: #8CBDB5;
  --link: #E85C93;
  --link-hover: #cf4a7f;

  /* Tipografia */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /* Raios e sombras */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --shadow-card: 0 20px 40px -24px rgba(0, 0, 0, .4);
  --shadow-soft: 0 12px 26px -18px rgba(0, 0, 0, .25);

  /* Grade */
  --container-max: 1200px;
  --container-narrow-max: 820px;

  /* Breakpoints (referência, usados diretamente nas media queries) */
  --bp-tablet: 900px;
  --bp-mobile: 540px;
}