*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Primary Colors - Sky Blue */
  --color-sky-100: #e8f4fc;
  --color-sky-200: #c5e4f7;
  --color-sky-300: #8fcef0;
  --color-sky-400: #5bb8e8;
  --color-sky-500: #4aa8d8;

  /* Pink/Rose */
  --color-rose-100: #fef0f3;
  --color-rose-200: #fcd5de;
  --color-rose-300: #f8b4c4;
  --color-rose-400: #f299af;
  --color-rose-500: #e8879e;

  /* Golden/Yellow Accent */
  --color-golden-100: #fef9e7;
  --color-golden-200: #fcefc5;
  --color-golden-300: #f9e08a;
  --color-golden-400: #f5cb5c;
  --color-golden-500: #e8a838;

  /* Cream/Neutral */
  --color-cream-50: #fefefe;
  --color-cream-100: #fdfbf9;
  --color-cream-200: #f9f5f0;
  --color-cream-300: #f0ebe4;

  /* Text Colors */
  --color-text-primary: #4a4458;
  --color-text-secondary: #6b6480;
  --color-text-muted: #9890a8;

  /* Shadows */
  --shadow-soft: 0 4px 20px rgba(138, 180, 206, 0.15);
  --shadow-card: 0 8px 32px rgba(138, 180, 206, 0.2);
  --shadow-hover: 0 12px 40px rgba(138, 180, 206, 0.25);
  --shadow-glow-blue: 0 0 40px rgba(91, 184, 232, 0.3);
  --shadow-glow-pink: 0 0 40px rgba(248, 180, 196, 0.4);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--color-text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--color-rose-200);
  color: var(--color-text-primary);
}