@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  color-scheme: light;
  --bg-main: #ffe1dc;
  --bg-secondary: #f9d8d2;
  --bg-glow: #ffece8;
  --pattern-dot: rgba(242, 190, 184, 0.42);
  --surface-main: #fff9f1;
  --surface-secondary: #fffdf8;
  --surface-accent: #fff4f8;
  --surface-halo: #f5c8c3;
  --surface-border: #f3d8d2;
  --text-main: #7b5c70;
  --text-strong: #5e4559;
  --text-muted: #9b7e8f;
  --text-soft: #b28ca2;
  --lavender: #d9b8f2;
  --lavender-depth: #b98ddb;
  --lavender-hover: #cfa6ef;
  --lavender-active: #b88ddf;
  --mint: #bce9d8;
  --mint-depth: #8fcbb5;
  --mint-hover: #aee2cf;
  --mint-active: #8fcbb5;
  --peach: #ffc0ae;
  --peach-depth: #ef8e81;
  --peach-hover: #ffb19d;
  --peach-active: #ea8477;
  --sparkle-white: #ffffff;
  --sparkle-purple: #c39bd8;
  --sparkle-peach: #ffd1a8;
  --dash-pink: #f2c3df;
  --ok: #97d0ae;
  --warning: #f3bf88;
  --danger: #f0a1a7;
  --radius-xs: 14px;
  --radius-sm: 22px;
  --radius-md: 34px;
  --radius-lg: 48px;
  --radius-pill: 999px;
  --shadow-card: 0 28px 54px rgba(188, 128, 148, 0.18);
  --shadow-soft: 0 16px 28px rgba(197, 141, 155, 0.16);
  --shadow-halo: 0 36px 60px rgba(219, 163, 177, 0.24);
  --shadow-button-lavender: 0 8px 0 var(--lavender-depth), 0 18px 24px rgba(185, 141, 219, 0.28);
  --shadow-button-mint: 0 8px 0 var(--mint-depth), 0 18px 24px rgba(143, 203, 181, 0.3);
  --shadow-button-peach: 0 8px 0 var(--peach-depth), 0 18px 24px rgba(239, 142, 129, 0.24);
  --border-width: 2px;
  --max-width: 1220px;
  --hero-width: 960px;
  --space-2xs: 0.35rem;
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.2rem;
  --space-lg: 1.7rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;
  --transition-fast: 150ms ease;
  --transition-mid: 240ms ease;
}

:root[data-theme='night'] {
  color-scheme: dark;
  --bg-main: #0d1021;
  --bg-secondary: #171d39;
  --bg-glow: #101734;
  --pattern-dot: rgba(182, 194, 255, 0.12);
  --surface-main: #171d39;
  --surface-secondary: #20274a;
  --surface-accent: #292f57;
  --surface-halo: #4251a8;
  --surface-border: #4f5d9f;
  --text-main: #e6e9ff;
  --text-strong: #ffffff;
  --text-muted: #b5bbe8;
  --text-soft: #8d95cb;
  --lavender: #9582ff;
  --lavender-depth: #6650d9;
  --lavender-hover: #a999ff;
  --lavender-active: #7f6be9;
  --mint: #68c9d8;
  --mint-depth: #3d8896;
  --mint-hover: #7bd7e4;
  --mint-active: #56b4c4;
  --peach: #ff9bc4;
  --peach-depth: #c96492;
  --peach-hover: #ffadd0;
  --peach-active: #ed86b2;
  --sparkle-white: #f7fbff;
  --sparkle-purple: #c8b7ff;
  --sparkle-peach: #ffd499;
  --dash-pink: #705cae;
  --ok: #70d8b6;
  --warning: #ffcf8d;
  --danger: #ff8faf;
  --shadow-card: 0 24px 58px rgba(2, 4, 15, 0.58);
  --shadow-soft: 0 16px 34px rgba(5, 7, 21, 0.45);
  --shadow-halo: 0 32px 64px rgba(66, 81, 168, 0.3);
  --shadow-button-lavender: 0 8px 0 var(--lavender-depth), 0 18px 26px rgba(55, 46, 116, 0.42);
  --shadow-button-mint: 0 8px 0 var(--mint-depth), 0 18px 26px rgba(27, 70, 78, 0.42);
  --shadow-button-peach: 0 8px 0 var(--peach-depth), 0 18px 26px rgba(94, 35, 62, 0.42);
}