@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;500&display=swap");

@font-face {
  font-family: "More Sugar";
  src: url("../assets/more_sugar (Tipografia)/MoreSugar-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "More Sugar";
  src: url("../assets/more_sugar (Tipografia)/MoreSugar-Thin.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-sky: #69d2ff;
  --color-mint: #62e6a7;
  --color-lemon: #ffe66d;
  --color-coral: #ff7a90;
  --color-grape: #8b5cf6;
  --color-ink: #24314f;
  --color-muted: #65708c;
  --color-paper: #fffaf1;
  --color-card: rgba(255, 255, 255, 0.86);
  --color-line: rgba(36, 49, 79, 0.12);
  --shadow-soft: 0 18px 45px rgba(74, 64, 118, 0.16);
  --shadow-pop: 0 12px 0 rgba(36, 49, 79, 0.08), 0 22px 55px rgba(74, 64, 118, 0.16);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --space-1: clamp(0.45rem, 0.4rem + 0.25vw, 0.65rem);
  --space-2: clamp(0.75rem, 0.65rem + 0.45vw, 1rem);
  --space-3: clamp(1rem, 0.85rem + 0.8vw, 1.55rem);
  --space-4: clamp(1.45rem, 1.15rem + 1.45vw, 2.5rem);
  --space-5: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  --font-display: "More Sugar", "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.dark {
  --color-paper: #161a2c;
  --color-card: rgba(31, 36, 61, 0.84);
  --color-ink: #fff8e8;
  --color-muted: #c6cbe0;
  --color-line: rgba(255, 255, 255, 0.14);
}