@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --clr-pink: #ff7bb7;
  --clr-pink-200: #ffaedd;
  --clr-pink-700: #e24d9a;

  --clr-sky: #8fd6ff;
  --clr-sky-200: #bde9ff;
  --clr-sky-700: #3ba6e8;

  --clr-violet: #d9b3ff;
  --clr-violet-700: #b084f5;

  --clr-mint: #b7f7e3;
  --clr-mint-700: #7ee1cc;

  --clr-lemon-100: #fff3b0;
  --clr-lemon-300: #ffe08a;
  --clr-lemon-500: #ffd24d;

  --clr-geen-100: #d4f8e4;
  --clr-geen-300: #a9f1c8;
  --clr-geen-500: #7de9ac;

  --coin-base: #ffd54a;
  --coin-shadow: #f4a300;
  --coin-hi: #fff4c2;
  --coin-line: #a86b00;

  --bg-page: #f9fbff;
  --bg-card: #ffffff;
  --bg-pink-soft: #fff7fb;
  --bg-sky-soft: #f2faff;
  --stroke: #ededed;

  --txt-1: #0f0f0f;
  --txt-2: #555555;
  --txt-on-dark: #f5f5f5;

  /* Gradients */
  --grad-candy: linear-gradient(135deg, #ffa9d6 0%, #9ad6ff 100%);
  --grad-aurora: radial-gradient(
    120% 140% at 20% 20%,
    #ffaedd 0%,
    #d9b3ff 35%,
    #8fd6ff 70%,
    #eaf7ff 100%
  );
  --grad-jelly: linear-gradient(180deg, #ff7bb7 0%, #ffaedd 50%, #bde9ff 100%);
}

* {
  font-family: 'Kanit', 'Montserrat', sans-serif;
}

body {
  background: url('/assets/images/background.jpg') left top / 180% auto repeat,
    var(--bg-page);
  background-attachment: fixed;
  color: var(--txt-1);
}

/* Text Colors */
.text-pink {
  color: var(--clr-pink);
}
.text-pink-200 {
  color: var(--clr-pink-200);
}
.text-pink-700 {
  color: var(--clr-pink-700);
}
.text-sky {
  color: var(--clr-sky);
}
.text-sky-200 {
  color: var(--clr-sky-200);
}
.text-sky-700 {
  color: var(--clr-sky-700);
}
.text-violet {
  color: var(--clr-violet);
}
.text-violet-700 {
  color: var(--clr-violet-700);
}
.text-mint {
  color: var(--clr-mint);
}
.text-mint-700 {
  color: var(--clr-mint-700);
}
.text-lemon-100 {
  color: var(--clr-lemon-100);
}
.text-lemon-300 {
  color: var(--clr-lemon-300);
}
.text-lemon-500 {
  color: var(--clr-lemon-500);
}

/* Background Colors */
.bg-pink {
  background-color: var(--clr-pink);
}
.bg-pink-200 {
  background-color: var(--clr-pink-200);
}
.bg-pink-700 {
  background-color: var(--clr-pink-700);
}
.bg-sky {
  background-color: var(--clr-sky);
}
.bg-sky-200 {
  background-color: var(--clr-sky-200);
}
.bg-sky-700 {
  background-color: var(--clr-sky-700);
}
.bg-violet {
  background-color: var(--clr-violet);
}
.bg-violet-700 {
  background-color: var(--clr-violet-700);
}
.bg-mint {
  background-color: var(--clr-mint);
}
.bg-mint-700 {
  background-color: var(--clr-mint-700);
}
.bg-lemon-100 {
  background-color: var(--clr-lemon-100);
}
.bg-lemon-300 {
  background-color: var(--clr-lemon-300);
}
.bg-lemon-500 {
  background-color: var(--clr-lemon-500);
}

/* Background Presets */
.bg-page {
  background-color: var(--bg-page);
}
.bg-card {
  background-color: var(--bg-card);
}
.bg-pink-soft {
  background-color: var(--bg-pink-soft);
}
.bg-sky-soft {
  background-color: var(--bg-sky-soft);
}

/* Gradient Backgrounds */
.bg-grad-candy {
  background: var(--grad-candy);
}
.bg-grad-aurora {
  background: var(--grad-aurora);
}
.bg-grad-jelly {
  background: var(--grad-jelly);
}

/* Border Colors */
.border-pink {
  border-color: var(--clr-pink);
}
.border-sky {
  border-color: var(--clr-sky);
}
.border-violet {
  border-color: var(--clr-violet);
}
.border-mint {
  border-color: var(--clr-mint);
}
.border-stroke {
  border-color: var(--stroke);
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: linear;
}