@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap");

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Andika";
  src: url("../fonts/andika-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Andika";
  src: url("../fonts/andika-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Nunito", "Segoe UI", sans-serif;
  --font-display: "Baloo 2", "Nunito", sans-serif;
  --font-dys: "Andika", "Segoe UI", sans-serif;

  --color-bg: #f6f3ee;
  --color-surface: #ffffff;
  --color-surface-soft: #fcfaf7;
  --color-surface-strong: #f3efe9;
  --color-border: #eaeaea;
  --color-border-strong: #d8d8d8;
  --color-text: #1d2433;
  --color-text-soft: #596174;
  --color-text-faint: #778094;
  --color-primary: #4b63ff;
  --color-primary-soft: #eef1ff;
  --color-accent: #41c200;
  --color-accent-soft: #eef9e7;
  --color-success: #1f9d5c;
  --color-warning: #d97706;
  --color-danger: #d14343;
  --color-primary-dark: #3a51e0;
  --color-primary-glow: rgba(75, 99, 255, 0.18);
  --color-accent-dark: #37aa00;
  --color-accent-glow: rgba(65, 194, 0, 0.25);

  --color-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 22px rgba(0, 0, 0, 0.045);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.07);
  --shadow-lg:  0 8px 16px rgba(0, 0, 0, 0.07), 0 24px 48px rgba(0, 0, 0, 0.09);
  --shadow-xl:  0 16px 32px rgba(0, 0, 0, 0.09), 0 40px 72px rgba(0, 0, 0, 0.12);

  --gradient-hero:    linear-gradient(135deg, #ffffff 0%, #f0edff 55%, #e8f2ff 100%);
  --gradient-primary: linear-gradient(135deg, #4b63ff 0%, #6b7fff 100%);
  --gradient-accent:  linear-gradient(135deg, #41c200 0%, #5dd900 100%);
  --gradient-purple:  linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --radius-card:   14px;
  --radius-button: 12px;
  --radius-large:  20px;
  --radius-xl:     28px;
  --radius-pill:   999px;

  --space-1: 4px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 22px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 32px;
  --space-12: 40px;

  --text-body-size: 15px;
  --text-body-line: 1.6;
  --transition-fast: 160ms ease-out;
  --transition-base: 240ms var(--ease-smooth);
}