@charset "UTF-8";

:root {
  --color-key: #1e2859;
  --color-white: #fff;
  --color-accent: #ec7b35;
  --color-bg-key: #ebf6f7;
  --color-gradation: linear-gradient(
    270deg,
    #6ec2e6 10.41%,
    #76c5e7 26.08%,
    #8fd0ec 52.21%,
    #b6e1f3 84.42%,
    #c8e9f7 97.48%
  );

  --border-radius-main: 1rem;

  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem; /* 48px */
  --spacing-13: 3.25rem; /* 52px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-15: 3.75rem; /* 60px */

  --font-size-xxs: 0.875rem; /* 14px */
  --font-size-xs: 0.875rem; /* 14px */
  --font-size-sm: 1rem; /* 16px */
  --font-size-md: 1.125rem; /* 18px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 2rem; /* 32px */
  --font-size-4xl: 2.5rem; /* 40px */
  --font-size-5xl: 2.5rem; /* 40px */
  --font-size-6xl: 3rem; /* 48px */
  --font-size-7xl: 3.5rem; /* 56px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --shadow-md: 0 08px 8px rgb(30 40 89 / 8%);

  --animation: 0.3s all ease-in-out;
}

@media screen and (min-width: 1200px) {
  :root {
    --spacing-1: 0.5rem; /* 8px */
    --spacing-2: 1rem; /* 16px */
    --spacing-3: 1.5rem; /* 24px */
    --spacing-4: 2rem; /* 32px */
    --spacing-5: 2.5rem; /* 40px */
    --spacing-6: 3rem; /* 48px */
    --spacing-7: 3.5rem; /* 56px */
    --spacing-8: 4rem; /* 64px */
    --spacing-9: 4.5rem; /* 72px */
    --spacing-10: 5rem; /* 80px */
    --spacing-11: 5.5rem; /* 88px */
    --spacing-12: 6rem; /* 96px */
    --spacing-13: 6.5rem; /* 104px */
    --spacing-14: 7rem; /* 112px */
    --spacing-15: 7.5rem; /* 120px */

    --font-size-xxs: 0.875rem; /* 14px */
    --font-size-xs: 1rem; /* 16px */
    --font-size-sm: 1.125rem; /* 18px */
    --font-size-md: 1.25rem; /* 20px */
    --font-size-lg: 1.5rem; /* 24px */
    --font-size-xl: 2rem; /* 32px */
    --font-size-2xl: 2.5rem; /* 40px */
    --font-size-3xl: 3rem; /* 48px */
    --font-size-4xl: 3.5rem; /* 56px */
    --font-size-5xl: 4rem; /* 64px */
    --font-size-6xl: 4.5rem; /* 72px */
    --font-size-7xl: 5rem; /* 80px */
  }
}