/*!*****************************
*****     settings.css     *****
*******************************/

@layer base {
  :root {
    interpolate-size: allow-keywords;
    accent-color: #0019fe;
    accent-color: var(--clr-primary-500);

    --sm: 420px;
    --md: 768px;
    --lg: 1024px;
    --xl: 1280px;
    --xxl: 1440px;
    --full-screen: 1920px;
    /* * */
    --speed-100: 100ms;
    --speed-200: 200ms;
    --speed-300: 300ms;
    --speed-400: 400ms;
    --speed-500: 500ms;
    --speed-600: 600ms;
    --speed-700: 700ms;
    --speed-800: 800ms;
    --speed-900: 900ms;
    --speed-1000: 1000ms;
  }

    @media (prefers-reduced-motion: reduce) {
  :root {
      --speed-100: 10ms;
      --speed-200: 20ms;
      --speed-300: 30ms;
      --speed-400: 40ms;
      --speed-500: 50ms;
      --speed-600: 60ms;
      --speed-700: 70ms;
      --speed-800: 80ms;
      --speed-900: 90ms;
      --speed-1000: 100ms;
  }
    }
  :root {

    /* * */

    --ff-sans:
      Nudista, ui-sans-serif,system-ui, -apple-system, Segoe UI, Roboto,
      Ubuntu, Cantarell, Noto Sans, sans-serif;
    /*--ff-sans: Hind, ui-sans-serif, system-ui, sans-serif;*/
    --ff-mono: monospace;
    --ff-decoration:
      Nudista, ui-sans-serif,system-ui, -apple-system, Segoe UI, Roboto,
      Ubuntu, Cantarell, Noto Sans, sans-serif;
    --fs: 1.1rem;
    --fw-normal: 600;
    --fw-bold: 600;
    --lh: 1;
    /* * */
    /* * */
    /* * */
    /*
    --clr-primary: #2d8882 ;
    --clr-primary-100: hsl(from var(--clr-primary) h s calc(l + 20));
    --clr-primary-200: hsl(from var(--clr-primary) h s calc(l + 15));
    --clr-primary-300: hsl(from var(--clr-primary) h s calc(l + 10));
    --clr-primary-400: hsl(from var(--clr-primary) h s calc(l + 5));
    --clr-primary-500: var(--clr-primary);
    --clr-primary-600: hsl(from var(--clr-primary) h s calc(l - 5));
    --clr-primary-700: hsl(from var(--clr-primary) h s calc(l - 10));
    --clr-primary-800: hsl(from var(--clr-primary) h s calc(l - 15));
    --clr-primary-900: hsl(from var(--clr-primary) h s calc(l - 20));
    */

    --clr-primary: #0019fe;
    --clr-primary-100: hsl(from var(--clr-primary) h s calc(l + 20));
    --clr-primary-200: hsl(from var(--clr-primary) h s calc(l + 15));
    --clr-primary-300: hsl(from var(--clr-primary) h s calc(l + 10));
    --clr-primary-400: hsl(from var(--clr-primary) h s calc(l + 5));
    --clr-primary-500: var(--clr-primary);
    --clr-primary-600: hsl(from var(--clr-primary) h s calc(l - 5));
    --clr-primary-700: hsl(from var(--clr-primary) h s calc(l - 10));
    --clr-primary-800: hsl(from var(--clr-primary) h s calc(l - 15));
    --clr-primary-900: hsl(from var(--clr-primary) h s calc(l - 20));

    /* * */
    /* * */
    /* * */
    --clr-secondary: #a800ad;
    --clr-secondary-100: hsl(from var(--clr-secondary) h s calc(l + 20));
    --clr-secondary-200: hsl(from var(--clr-secondary) h s calc(l + 15));
    --clr-secondary-300: hsl(from var(--clr-secondary) h s calc(l + 10));
    --clr-secondary-400: hsl(from var(--clr-secondary) h s calc(l + 5));
    --clr-secondary-500: var(--clr-secondary);
    --clr-secondary-600: hsl(from var(--clr-secondary) h s calc(l - 5));
    --clr-secondary-700: hsl(from var(--clr-secondary) h s calc(l - 10));
    --clr-secondary-800: hsl(from var(--clr-secondary) h s calc(l - 15));
    --clr-secondary-900: hsl(from var(--clr-secondary) h s calc(l - 20));
    /* * */
    /* * */
    /* * */
    --clr-tertiary: #0678be;
    --clr-tertiary-100: hsl(from var(--clr-tertiary) h s calc(l + 20));
    --clr-tertiary-200: hsl(from var(--clr-tertiary) h s calc(l + 15));
    --clr-tertiary-300: hsl(from var(--clr-tertiary) h s calc(l + 10));
    --clr-tertiary-400: hsl(from var(--clr-tertiary) h s calc(l + 5));
    --clr-tertiary-500: var(--clr-tertiary);
    --clr-tertiary-600: hsl(from var(--clr-tertiary) h s calc(l - 5));
    --clr-tertiary-700: hsl(from var(--clr-tertiary) h s calc(l - 10));
    --clr-tertiary-800: hsl(from var(--clr-tertiary) h s calc(l - 15));
    --clr-tertiary-900: hsl(from var(--clr-tertiary) h s calc(l - 20));
    /* * */
    /* * */
    /* * */
    /*
    --clr-quaternary: # ;
    --clr-quinary   : # ;
    --clr-senary    : # ;
    --clr-septenary : # ;
    --clr-octonary  : # ;
    --clr-nonary    : # ;
    --clr-denary    : # ;
  */
    /* * */
    /* * */
    /* * */
    --clr-light: #ffffff; /*#fcfcfc;*/ /* #f6eedf; */
    --clr-light-100: hsl(from var(--clr-light) h s calc(l + 8));
    --clr-light-200: hsl(from var(--clr-light) h s calc(l + 6));
    --clr-light-300: hsl(from var(--clr-light) h s calc(l + 4));
    --clr-light-400: hsl(from var(--clr-light) h s calc(l + 2));
    --clr-light-500: hsl(from var(--clr-light) h s calc(l - 0));
    --clr-light-600: hsl(from var(--clr-light) h s calc(l - 2));
    --clr-light-700: hsl(from var(--clr-light) h s calc(l - 4));
    --clr-light-800: hsl(from var(--clr-light) h s calc(l - 6));
    --clr-light-900: hsl(from var(--clr-light) h s calc(l - 8));
    /* * */
    /* * */
    /* * */
    --clr-dark: #000000;
    --clr-dark-900: hsl(from var(--clr-dark) h s calc(l - 8));
    --clr-dark-800: hsl(from var(--clr-dark) h s calc(l - 6));
    --clr-dark-700: hsl(from var(--clr-dark) h s calc(l - 4));
    --clr-dark-600: hsl(from var(--clr-dark) h s calc(l - 2));
    --clr-dark-500: hsl(from var(--clr-dark) h s calc(l - 0));
    --clr-dark-400: hsl(from var(--clr-dark) h s calc(l + 2));
    --clr-dark-300: hsl(from var(--clr-dark) h s calc(l + 4));
    --clr-dark-200: hsl(from var(--clr-dark) h s calc(l + 6));
    --clr-dark-100: hsl(from var(--clr-dark) h s calc(l + 8));
    /* * */
    /* * */
    /* * */
    --clr-gray: #e6e6e6;
    --clr-gray-100: hsl(from var(--clr-gray) h s calc(l + 20));
    --clr-gray-200: hsl(from var(--clr-gray) h s calc(l + 15));
    --clr-gray-300: hsl(from var(--clr-gray) h s calc(l + 10));
    --clr-gray-400: hsl(from var(--clr-gray) h s calc(l + 5));
    --clr-gray-500: var(--clr-gray);
    --clr-gray-600: hsl(from var(--clr-gray) h s calc(l - 5));
    --clr-gray-700: hsl(from var(--clr-gray) h s calc(l - 10));
    --clr-gray-800: hsl(from var(--clr-gray) h s calc(l - 15));
    --clr-gray-900: hsl(from var(--clr-gray) h s calc(l - 20));
    /* * */
    /* * */
    /* * */
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--clr-dark);
    --clr-bg: var(--csstools-light-dark-toggle--0, var(--clr-light));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--clr-dark-100);
    --clr-bg-100: var(--csstools-light-dark-toggle--1, var(--clr-light-100));
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--clr-dark-200);
    --clr-bg-200: var(--csstools-light-dark-toggle--2, var(--clr-light-200));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--clr-dark-300);
    --clr-bg-300: var(--csstools-light-dark-toggle--3, var(--clr-light-300));
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) var(--clr-dark-400);
    --clr-bg-400: var(--csstools-light-dark-toggle--4, var(--clr-light-400));
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) var(--clr-dark-500);
    --clr-bg-500: var(--csstools-light-dark-toggle--5, var(--clr-light-500));
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) var(--clr-dark-600);
    --clr-bg-600: var(--csstools-light-dark-toggle--6, var(--clr-light-600));
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) var(--clr-dark-700);
    --clr-bg-700: var(--csstools-light-dark-toggle--7, var(--clr-light-700));
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) var(--clr-dark-800);
    --clr-bg-800: var(--csstools-light-dark-toggle--8, var(--clr-light-800));
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) var(--clr-dark-900);
    --clr-bg-900: var(--csstools-light-dark-toggle--9, var(--clr-light-900));
    /* * */
    /* * */
    /* * */
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) var(--clr-light);
    --clr-fg: var(--csstools-light-dark-toggle--10, var(--clr-dark));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) var(--clr-light-100);
    --clr-fg-100: var(--csstools-light-dark-toggle--11, var(--clr-dark-100));
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--clr-light-200);
    --clr-fg-200: var(--csstools-light-dark-toggle--12, var(--clr-dark-200));
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) var(--clr-light-300);
    --clr-fg-300: var(--csstools-light-dark-toggle--13, var(--clr-dark-300));
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) var(--clr-light-400);
    --clr-fg-400: var(--csstools-light-dark-toggle--14, var(--clr-dark-400));
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) var(--clr-light-500);
    --clr-fg-500: var(--csstools-light-dark-toggle--15, var(--clr-dark-500));
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) var(--clr-light-600);
    --clr-fg-600: var(--csstools-light-dark-toggle--16, var(--clr-dark-600));
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--clr-light-700);
    --clr-fg-700: var(--csstools-light-dark-toggle--17, var(--clr-dark-700));
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--clr-light-800);
    --clr-fg-800: var(--csstools-light-dark-toggle--18, var(--clr-dark-800));
    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) var(--clr-light-900);
    --clr-fg-900: var(--csstools-light-dark-toggle--19, var(--clr-dark-900));
    /* * */
    /* * */
    /* * */
    --clr-status: #d7e1d7;
    --clr-error: #f6dfdf;
    --clr-warning: #fbe4bc;
    /* --clr-custom-msg:  #d9d9d9; */
    /* * */
    /* * */
    --sp-1px: 1px;
    --sp-2px: 2px;
    --sp-3px: 3px;
    --sp-4px: 4px;
    --sp-5px: 5px;
    --sp-6px: 6px;
    --sp-7px: 7px;
    --sp-0: 0;
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 1.75rem;
    --sp-8: 2rem;
    --sp-9: 2.25rem;
    --sp-10: 2.5rem;
    --sp-11: 2.75rem;
    --sp-12: 3rem;
    --sp-13: 3.25rem;
    --sp-14: 3.5rem;
    --sp-15: 3.75rem;
    --sp-16: 4rem; /* 4 x 16 = 64  */
    --sp-17: 4.25rem;
    --sp-18: 4.5rem;
    --sp-19: 4.75rem;
    --sp-20: 5rem; /*  5 x 16 = 80 */
    --sp-21: 5.25rem;
    --sp-22: 5.5rem;
    --sp-23: 5.76rem;
    --sp-24: 6rem; /*  6 x 16 = 96 */
    /*--sp-25: 6.25rem;*/ /*     (4 x 16) + 4 = 100       */
    /*--sp-26: 6.5rem;*/
    /*--sp-27: 6.75rem;*/
    /*--sp-28: 7rem;*/
    /*--sp-29: 7.25rem;*/
    /*--sp-30: 7.5rem;*/
    /*--sp-31: 7.75rem;*/
    /*--sp-32: 8rem;*/ /*       8 * 16 = 128            */
    /* * */
    /* * */
    /* * */
    /*<offset-x> <offset-y> <blur-radius> <spread-radius> <color> */
    --shadow-sm: 0 0 16px -4px;
    --shadow-md: 0 0 16px -2px;
    --shadow-lg: 0 0 16px 0px;
    --shadow-xl: 0 0 16px 2px;
    --shadow-xxl: 0 0 16px 4px;
    /* * */
    /* * */
    /* * */
    --border-sm: 1px;
    --border-md: 2px;
    --border-lg: 3px;
    --border-xl: 4px;
    --border-xxl: 5px;
    /* * */
    /* * */
    /* * */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-xxl: 55px;
    /* * */
    /* * */
    /* * */
  }

@supports (color: light-dark(red, red)) {
:root {
    --clr-bg: light-dark(var(--clr-light), var(--clr-dark));
    --clr-bg-100: light-dark(var(--clr-light-100), var(--clr-dark-100));
    --clr-bg-200: light-dark(var(--clr-light-200), var(--clr-dark-200));
    --clr-bg-300: light-dark(var(--clr-light-300), var(--clr-dark-300));
    --clr-bg-400: light-dark(var(--clr-light-400), var(--clr-dark-400));
    --clr-bg-500: light-dark(var(--clr-light-500), var(--clr-dark-500));
    --clr-bg-600: light-dark(var(--clr-light-600), var(--clr-dark-600));
    --clr-bg-700: light-dark(var(--clr-light-700), var(--clr-dark-700));
    --clr-bg-800: light-dark(var(--clr-light-800), var(--clr-dark-800));
    --clr-bg-900: light-dark(var(--clr-light-900), var(--clr-dark-900));
    --clr-fg: light-dark(var(--clr-dark), var(--clr-light));
    --clr-fg-100: light-dark(var(--clr-dark-100), var(--clr-light-100));
    --clr-fg-200: light-dark(var(--clr-dark-200), var(--clr-light-200));
    --clr-fg-300: light-dark(var(--clr-dark-300), var(--clr-light-300));
    --clr-fg-400: light-dark(var(--clr-dark-400), var(--clr-light-400));
    --clr-fg-500: light-dark(var(--clr-dark-500), var(--clr-light-500));
    --clr-fg-600: light-dark(var(--clr-dark-600), var(--clr-light-600));
    --clr-fg-700: light-dark(var(--clr-dark-700), var(--clr-light-700));
    --clr-fg-800: light-dark(var(--clr-dark-800), var(--clr-light-800));
    --clr-fg-900: light-dark(var(--clr-dark-900), var(--clr-light-900));
  }
}
    @supports not (color: light-dark(tan, tan)) {
  :root * {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--clr-dark);
    --clr-bg: var(--csstools-light-dark-toggle--0, var(--clr-light));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--clr-dark-100);
    --clr-bg-100: var(--csstools-light-dark-toggle--1, var(--clr-light-100));
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--clr-dark-200);
    --clr-bg-200: var(--csstools-light-dark-toggle--2, var(--clr-light-200));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--clr-dark-300);
    --clr-bg-300: var(--csstools-light-dark-toggle--3, var(--clr-light-300));
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) var(--clr-dark-400);
    --clr-bg-400: var(--csstools-light-dark-toggle--4, var(--clr-light-400));
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) var(--clr-dark-500);
    --clr-bg-500: var(--csstools-light-dark-toggle--5, var(--clr-light-500));
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) var(--clr-dark-600);
    --clr-bg-600: var(--csstools-light-dark-toggle--6, var(--clr-light-600));
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) var(--clr-dark-700);
    --clr-bg-700: var(--csstools-light-dark-toggle--7, var(--clr-light-700));
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) var(--clr-dark-800);
    --clr-bg-800: var(--csstools-light-dark-toggle--8, var(--clr-light-800));
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) var(--clr-dark-900);
    --clr-bg-900: var(--csstools-light-dark-toggle--9, var(--clr-light-900));
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) var(--clr-light);
    --clr-fg: var(--csstools-light-dark-toggle--10, var(--clr-dark));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) var(--clr-light-100);
    --clr-fg-100: var(--csstools-light-dark-toggle--11, var(--clr-dark-100));
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--clr-light-200);
    --clr-fg-200: var(--csstools-light-dark-toggle--12, var(--clr-dark-200));
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) var(--clr-light-300);
    --clr-fg-300: var(--csstools-light-dark-toggle--13, var(--clr-dark-300));
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) var(--clr-light-400);
    --clr-fg-400: var(--csstools-light-dark-toggle--14, var(--clr-dark-400));
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) var(--clr-light-500);
    --clr-fg-500: var(--csstools-light-dark-toggle--15, var(--clr-dark-500));
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) var(--clr-light-600);
    --clr-fg-600: var(--csstools-light-dark-toggle--16, var(--clr-dark-600));
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--clr-light-700);
    --clr-fg-700: var(--csstools-light-dark-toggle--17, var(--clr-dark-700));
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--clr-light-800);
    --clr-fg-800: var(--csstools-light-dark-toggle--18, var(--clr-dark-800));
    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) var(--clr-light-900);
    --clr-fg-900: var(--csstools-light-dark-toggle--19, var(--clr-dark-900));
    }
  } /* end of :root */
} /* end of @layer base */