@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "Montserrat Variable", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  /* primary */
  --color-primary-50: oklch(0.9819 0.0181 155.83);
  --color-primary-100: oklch(0.9624 0.0434 156.74);
  --color-primary-200: oklch(0.925 0.0806 155.99);
  --color-primary-300: oklch(0.8712 0.1363 154.45);
  --color-primary-400: oklch(0.8003 0.1821 151.71);
  --color-primary-500: oklch(0.7227 0.192 149.58);
  --color-primary-600: oklch(0.6271 0.1699 149.21);
  --color-primary-700: oklch(0.5273 0.1371 150.07);
  --color-primary-800: oklch(0.4479 0.1083 151.33);
  --color-primary-900: oklch(0.3925 0.0896 152.54);
  --color-primary: var(--color-primary-500);

  /* Success */
  --color-success-50: oklch(0.9815 0.0257 121.16);
  --color-success-100: oklch(0.9582 0.0523 124.93);
  --color-success-200: oklch(0.9109 0.1172 118.9);
  --color-success-300: oklch(0.8897 0.1383 121.61);
  --color-success-400: oklch(0.8653 0.1252 131.46);
  --color-success-500: oklch(0.8232 0.1234 140.29);
  --color-success-600: oklch(0.766 0.1115 154.5);
  --color-success-700: oklch(0.7087 0.1032 172.27);
  --color-success-800: oklch(0.6318 0.0984 174.8);
  --color-success-900: oklch(0.537 0.0804 179.45);
  --color-success: var(--color-success-300);

  /* Danger */
  --color-danger-50: oklch(0.9705 0.0129 17.38);
  --color-danger-100: oklch(0.9356 0.0309 17.72);
  --color-danger-200: oklch(0.8845 0.0593 18.33);
  --color-danger-300: oklch(0.8077 0.1035 19.57);
  --color-danger-400: oklch(0.7106 0.1661 22.22);
  --color-danger-500: oklch(0.6368 0.2078 25.33);
  --color-danger-600: oklch(0.5771 0.2152 27.33);
  --color-danger-700: oklch(0.5054 0.1905 27.52);
  --color-danger-800: oklch(0.4437 0.1613 26.9);
  --color-danger-900: oklch(0.3958 0.1331 25.72);
  --color-danger: var(--color-danger-500);

  /* Warning */
  --color-warning-50: oklch(0.9869 0.0214 95.28);
  --color-warning-100: oklch(0.9619 0.058 95.62);
  --color-warning-200: oklch(0.9243 0.1151 95.75);
  --color-warning-300: oklch(0.879 0.1534 91.61);
  --color-warning-400: oklch(0.8369 0.1644 84.43);
  --color-warning-500: oklch(0.7686 0.1647 70.08);
  --color-warning-600: oklch(0.6658 0.1574 58.32);
  --color-warning-700: oklch(0.5553 0.1455 49);
  --color-warning-800: oklch(0.4732 0.1247 46.2);
  --color-warning-900: oklch(0.4137 0.1054 45.9);
  --color-warning: var(--color-warning-500);

  /* Info */
  --color-info-50: oklch(0.9705 0.0142 254.6);
  --color-info-100: oklch(0.9319 0.0316 255.59);
  --color-info-200: oklch(0.8823 0.0571 254.13);
  --color-info-300: oklch(0.8091 0.0956 251.81);
  --color-info-400: oklch(0.7137 0.1434 254.62);
  --color-info-500: oklch(0.6231 0.188 259.81);
  --color-info-600: oklch(0.5461 0.2152 262.88);
  --color-info-700: oklch(0.4882 0.2172 264.38);
  --color-info-800: oklch(0.4244 0.1809 265.64);
  --color-info-900: oklch(0.3791 0.1378 265.52);
  --color-info: var(--color-info-500);


  /* Neutrals */
  --color-neutral-0: oklch(1 0 0);
  --color-neutral-50: oklch(0.9846 0.0017 247.84);
  --color-neutral-100: oklch(0.967 0.0029 264.54);
  --color-neutral-200: oklch(0.9276 0.0058 264.53);
  --color-neutral-300: oklch(0.8717 0.0093 258.34);
  --color-neutral-400: oklch(0.7137 0.0192 261.32);
  --color-neutral-500: oklch(0.551 0.0234 264.36);
  --color-neutral-600: oklch(0.4461 0.0263 256.8);
  --color-neutral-700: oklch(0.3729 0.0306 259.73);
  --color-neutral-800: oklch(0.2781 0.0296 256.85);
  --color-neutral-900: oklch(0.2101 0.0318 264.66);

  --color-font-primary: var(--color-neutral-900);
  --color-font-secondary: var(--color-neutral-500);

  --color-border: var(--color-neutral-300);

}

:root {
  /* base form field values  start*/

  --input-color-bg: white;

  --field-padding-x: --spacing(2);

  --field-sm: --spacing(10);
  --field-md: --spacing(12);
  --field-lg: --spacing(14);
  --field-radius: --spacing(1);

  --chekbox-sm: --spacing(5);
  --chekbox-md: --spacing(6);
  --chekbox-lg: --spacing(8);

  --chekbox-bg-sm: --spacing(11);
  --chekbox-bg-md: --spacing(13);
  --chekbox-bg-lg: --spacing(18);
  /* base form field values end */
}

@utility h-field-sm {
  height: var(--field-sm);
}

@utility h-field-md {
  height: var(--field-md);
}

@utility h-field-lg {
  height: var(--field-lg);
}

@utility field-radius {
  border-radius: var(--field-radius);
}


.dark {

  color-scheme: dark;
  --color-neutral-900: oklch(1 0 0);
  --color-neutral-800: oklch(0.9846 0.0017 247.84);
  --color-neutral-700: oklch(0.967 0.0029 264.54);
  --color-neutral-600: oklch(0.9276 0.0058 264.53);
  --color-neutral-500: oklch(0.8717 0.0093 258.34);
  --color-neutral-400: oklch(0.7137 0.0192 261.32);
  --color-neutral-300: oklch(0.551 0.0234 264.36);
  --color-neutral-200: oklch(0.4461 0.0263 256.8);
  --color-neutral-100: oklch(0.3729 0.0306 259.73);
  --color-neutral-50: oklch(0.2781 0.0296 256.85);
  --color-neutral-0: oklch(0.2101 0.0318 264.66);
  --color-font-primary: var(--color-neutral-900);
}

@layer utilities {
  @keyframes btn-ripple {
    from {
      transform: translate(-50%, -50%) scale(0);
      opacity: .35;
    }

    to {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }

  .ripple {
    position: absolute;
    pointer-events: none;
    border-radius: 9999px;
    background: var(--ripple-color, currentColor);
    width: var(--ripple-size);
    height: var(--ripple-size);
    left: var(--ripple-x);
    top: var(--ripple-y);
    transform: translate(-50%, -50%) scale(0);
    animation: btn-ripple 400ms ease-out;
  }
}