/* Tokens da Pet Creche, iguais às variáveis do Design System no Figma (arquivo Renda Extra, página Design System).
   Mudou lá, muda aqui com o mesmo nome. */
:root {
  /* paleta (Primitives) */
  --white: #FFFFFF;
  --cream-50: #FFFCF5;
  --cream-100: #FFF5E1;
  --cream-200: #FFE6AE;
  --cream-300: #F1DDBB;
  --yellow-400: #FFD45C;
  --orange-400: #FF8A3D;
  --orange-500: #ED6E1B;
  --orange-800: #AA4525;
  --orange-900: #973B1E;
  --brown-300: #A88D80;
  --brown-600: #6B4A3D;
  --brown-900: #3A1A10;
  --sky-300: #8CC8FF;
  --green-600: #2C9F7B;

  /* cores com função (Color) */
  --bg-page: var(--cream-100);
  --bg-card: var(--white);
  --bg-soft: var(--cream-200);
  --bg-paper: var(--cream-50);
  --bg-dark: var(--brown-900);
  --bg-highlight: var(--yellow-400);
  --bg-sky: var(--sky-300);
  --text-primary: var(--brown-900);
  --text-secondary: var(--brown-600);
  --text-muted: var(--brown-300);
  --text-on-dark: var(--cream-100);
  --text-accent: var(--orange-400);
  --border-default: var(--brown-900);
  --border-soft: var(--cream-300);
  --action-primary: var(--orange-500);
  --action-secondary: var(--orange-800);
  --action-whatsapp: var(--green-600);
  --action-soft: var(--sky-300);
  --action-neutral: var(--white);

  /* espaço e cantos (Dimensions) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-56: 56px;
  --space-96: 96px;
  --radius-xs: 4px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 40px;
  --radius-full: 999px;
  --border-width: 1.5px;
  --shadow-offset-sm: 5px;
  --shadow-offset-lg: 7px;

  /* fontes (Typography) */
  --font-display: "Bagel Fat One", "Cooper Black", serif;
  --font-body: "Nunito", system-ui, sans-serif;

  /* borda de adesivo (efeitos Sticker/*): traço 1px + contorno 1,5 + sombra dura pra baixo (afinado a pedido do Alan, 29/10) */
  --sticker-sm: 0 0 0 var(--border-width) var(--border-default), 0 var(--shadow-offset-sm) 0 0 var(--border-default);
  --sticker-lg: 0 0 0 var(--border-width) var(--border-default), 0 var(--shadow-offset-lg) 0 0 var(--border-default);
  --sticker-outline: 0 0 0 2px var(--border-default);
  /* fotos e cartões grandes: contorno mais grosso, igual ao Home no Figma */
  --sticker-photo: 0 0 0 3px var(--border-default), 0 8px 0 3px var(--border-default);

  /* movimento (regras do Emil) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* grade */
  --page-max: 1440px;
  --gutter: clamp(20px, 3.9vw, 56px);
}