:root {
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md: 1.125rem;    /* 18px */
    --font-size-lg: 1.25rem;     /* 20px */
    --font-size-xl: 1.5rem;      /* 24px */
    --font-size-2xl: 1.875rem;   /* 30px */
    --font-size-3xl: 2.25rem;    /* 36px */
    --font-size-4xl: 2.625rem;   /* 42px */
    --font-size-5xl: 3rem;       /* 48px */
}
:root {
    --space-4xs: clamp(0.125rem, calc(0.125rem + 0vw), 0.125rem);
    --space-3xs: clamp(0.25rem, calc(0.25rem + 0vw), 0.25rem);
    --space-2xs: clamp(0.5rem, calc(0.5rem + 0vw), 0.5rem);
    --space-xs: clamp(0.75rem, calc(0.75rem + 0vw), 0.75rem);
    --space-sm: clamp(1rem, calc(1rem + 0vw), 1rem);
    --space-md: clamp(1.5rem, calc(1.125rem + 0.78125vw), 1.75rem);
    --space-lg: clamp(2.25rem, calc(1.125rem + 2.34375vw), 3rem);
    --space-xl: clamp(3.5rem, calc(1.25rem + 4.6875vw), 5rem);
    --space-2xl: clamp(5.75rem, calc(2.375rem + 7.03125vw), 8rem);
    --space-3xl: clamp(9.25rem, calc(4.75rem + 9.375vw), 12.25rem);
    --space-4xl: clamp(15rem, calc(7.5rem + 15.625vw), 20rem);
    --font-primary: system-ui, sans-serif;
    --text-xs: clamp(0.6875rem, calc(0.59375rem + 0.1953125vw), 0.75rem);
    --text-sm: clamp(0.8125rem, calc(0.625rem + 0.390625vw), 0.9375rem);
    --text-base: clamp(1rem, calc(0.8125rem + 0.390625vw), 1.125rem);
    --text-md: clamp(1.1875rem, calc(0.90625rem + 0.5859375vw), 1.375rem);
    --text-lg: clamp(1.4375rem, calc(1.15625rem + 0.5859375vw), 1.625rem);
    --text-xl: clamp(1.75rem, calc(1.375rem + 0.78125vw), 2rem);
    --text-2xl: clamp(2.0625rem, calc(1.40625rem + 1.3671875vw), 2.5rem);
    --text-3xl: clamp(2.5rem, calc(1.75rem + 1.5625vw), 3rem);
    --text-4xl: clamp(3rem, calc(2.0625rem + 1.953125vw), 3.625rem);
    --line-height-xs: 1.1;
    --line-height-sm: 1.2;
    --line-height-md: 1.4;
    --line-height-lg: 1.58;
    --line-height-xl: 1.72;
    --max-width-3xs: 20rem;
    --max-width-2xs: 26rem;
    --max-width-xs: 32rem;
    --max-width-sm: 48rem;
    --max-width-md: 64rem;
    --max-width-lg: 80rem;
    --max-width-xl: 90rem;
    --container-margin-x: var(--space-md);
    --shadow-ring: 0 0 0 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.05);
    --shadow-xs: 0 0 0 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.02), 0 1px 3px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.2);
    --shadow-sm: 0 0.3px 0.4px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.02), 0 0.9px 1.5px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.045), 0 3.5px 6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.09);
    --shadow-md: 0 0.9px 1.25px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.025), 0 3px 5px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.05), 0 12px 20px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.09);
    --shadow-lg: 0 1.2px 1.9px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.01), 0 3px 5px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.015), 0 8px 15px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.05), 0 28px 40px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.1);
    --shadow-xl: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --shadow-base: 0 1px 1px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31);
    --inner-glow: inset 0 0 0.5px 1px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.075);
    --inner-glow-top: inset 0 1px 0.5px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.075);
    --radius-sm: 0.1875em;
    --radius-md: 0.375em;
    --radius-base: 0.5625em;
    --radius-lg: 0.75em;
    --z-index-header: 3;
    --z-index-popover: 5;
    --z-index-fixed-element: 10;
    --z-index-overlay: 15;
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root, [data-theme=default] {
    --color-primary-darker-h: 250;
    --color-primary-darker-s: 84%;
    --color-primary-darker-l: 38%;
    --color-primary-darker: hsl(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l));
    --color-primary-dark-h: 250;
    --color-primary-dark-s: 84%;
    --color-primary-dark-l: 46%;
    --color-primary-dark: hsl(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l));
    --color-primary-h: 250;
    --color-primary-s: 84%;
    --color-primary-l: 54%;
    --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
    --color-primary-light-h: 250;
    --color-primary-light-s: 84%;
    --color-primary-light-l: 60%;
    --color-primary-light: hsl(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l));
    --color-primary-lighter-h: 250;
    --color-primary-lighter-s: 84%;
    --color-primary-lighter-l: 67%;
    --color-primary-lighter: hsl(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l));
    --color-accent-darker-h: 342;
    --color-accent-darker-s: 89%;
    --color-accent-darker-l: 38%;
    --color-accent-darker: hsl(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l));
    --color-accent-dark-h: 342;
    --color-accent-dark-s: 89%;
    --color-accent-dark-l: 43%;
    --color-accent-dark: hsl(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l));
    --color-accent-h: 342;
    --color-accent-s: 89%;
    --color-accent-l: 48%;
    --color-accent: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l));
    --color-accent-light-h: 342;
    --color-accent-light-s: 89%;
    --color-accent-light-l: 56%;
    --color-accent-light: hsl(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l));
    --color-accent-lighter-h: 342;
    --color-accent-lighter-s: 89%;
    --color-accent-lighter-l: 62%;
    --color-accent-lighter: hsl(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l));
    --color-black-h: 230;
    --color-black-s: 13%;
    --color-black-l: 9%;
    --color-black: hsl(var(--color-black-h), var(--color-black-s), var(--color-black-l));
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-white: hsl(var(--color-white-h), var(--color-white-s), var(--color-white-l));
    --color-warning-darker-h: 35;
    --color-warning-darker-s: 79%;
    --color-warning-darker-l: 48%;
    --color-warning-darker: hsl(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l));
    --color-warning-dark-h: 35;
    --color-warning-dark-s: 79%;
    --color-warning-dark-l: 56%;
    --color-warning-dark: hsl(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l));
    --color-warning-h: 35;
    --color-warning-s: 79%;
    --color-warning-l: 66%;
    --color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
    --color-warning-light-h: 35;
    --color-warning-light-s: 79%;
    --color-warning-light-l: 74%;
    --color-warning-light: hsl(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l));
    --color-warning-lighter-h: 35;
    --color-warning-lighter-s: 79%;
    --color-warning-lighter-l: 82%;
    --color-warning-lighter: hsl(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l));
    --color-success-darker-h: 170;
    --color-success-darker-s: 78%;
    --color-success-darker-l: 26%;
    --color-success-darker: hsl(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l));
    --color-success-dark-h: 170;
    --color-success-dark-s: 78%;
    --color-success-dark-l: 31%;
    --color-success-dark: hsl(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l));
    --color-success-h: 170;
    --color-success-s: 78%;
    --color-success-l: 36%;
    --color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
    --color-success-light-h: 170;
    --color-success-light-s: 78%;
    --color-success-light-l: 42%;
    --color-success-light: hsl(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l));
    --color-success-lighter-h: 170;
    --color-success-lighter-s: 78%;
    --color-success-lighter-l: 47%;
    --color-success-lighter: hsl(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l));
    --color-error-darker-h: 342;
    --color-error-darker-s: 89%;
    --color-error-darker-l: 38%;
    --color-error-darker: hsl(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l));
    --color-error-dark-h: 342;
    --color-error-dark-s: 89%;
    --color-error-dark-l: 43%;
    --color-error-dark: hsl(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l));
    --color-error-h: 342;
    --color-error-s: 89%;
    --color-error-l: 48%;
    --color-error: hsl(var(--color-error-h), var(--color-error-s), var(--color-error-l));
    --color-error-light-h: 342;
    --color-error-light-s: 89%;
    --color-error-light-l: 56%;
    --color-error-light: hsl(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l));
    --color-error-lighter-h: 342;
    --color-error-lighter-s: 89%;
    --color-error-lighter-l: 62%;
    --color-error-lighter: hsl(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l));
    --color-bg-darker-h: 240;
    --color-bg-darker-s: 4%;
    --color-bg-darker-l: 90%;
    --color-bg-darker: hsl(var(--color-bg-darker-h), var(--color-bg-darker-s), var(--color-bg-darker-l));
    --color-bg-dark-h: 240;
    --color-bg-dark-s: 4%;
    --color-bg-dark-l: 95%;
    --color-bg-dark: hsl(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l));
    --color-bg-h: 0;
    --color-bg-s: 0%;
    --color-bg-l: 100%;
    --color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));
    --color-bg-light-h: 0;
    --color-bg-light-s: 0%;
    --color-bg-light-l: 100%;
    --color-bg-light: hsl(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l));
    --color-bg-lighter-h: 0;
    --color-bg-lighter-s: 0%;
    --color-bg-lighter-l: 100%;
    --color-bg-lighter: hsl(var(--color-bg-lighter-h), var(--color-bg-lighter-s), var(--color-bg-lighter-l));
    --color-contrast-lower-h: 240;
    --color-contrast-lower-s: 4%;
    --color-contrast-lower-l: 85%;
    --color-contrast-lower: hsl(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l));
    --color-contrast-low-h: 240;
    --color-contrast-low-s: 4%;
    --color-contrast-low-l: 65%;
    --color-contrast-low: hsl(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l));
    --color-contrast-medium-h: 225;
    --color-contrast-medium-s: 4%;
    --color-contrast-medium-l: 47%;
    --color-contrast-medium: hsl(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l));
    --color-contrast-high-h: 230;
    --color-contrast-high-s: 7%;
    --color-contrast-high-l: 23%;
    --color-contrast-high: hsl(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l));
    --color-contrast-higher-h: 230;
    --color-contrast-higher-s: 13%;
    --color-contrast-higher-l: 9%;
    --color-contrast-higher: hsl(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l));
}
:root {
    view-transition-name: root;
    --color-primary-darker: hsl(209, 65%, 27%);
    --color-primary-darker-h: 210;
    --color-primary-darker-s: 64%;
    --color-primary-darker-l: 27%;
    --color-primary-darker-hsl: 210, 64%, 27%;
    --color-primary-dark: hsl(210, 82%, 39%);
    --color-primary-dark-h: 210;
    --color-primary-dark-s: 82%;
    --color-primary-dark-l: 39%;
    --color-primary-dark-hsl: 210, 82%, 39%;
    --color-primary: hsl(209, 98%, 45%);
    --color-primary-h: 209;
    --color-primary-s: 98%;
    --color-primary-l: 45%;
    --color-primary-hsl: 209, 98%, 45%;
    --color-primary-light: hsl(212, 98%, 55%);
    --color-primary-light-h: 212;
    --color-primary-light-s: 98%;
    --color-primary-light-l: 55%;
    --color-primary-light-hsl: 212, 98%, 55%;
    --color-primary-lighter: hsl(212, 98%, 65%);
    --color-primary-lighter-h: 212;
    --color-primary-lighter-s: 98%;
    --color-primary-lighter-l: 65%;
    --color-primary-lighter-hsl: 212, 98%, 65%;
    --color-accent-darker: hsl(120, 50%, 35%);
    --color-accent-darker-h: 120;
    --color-accent-darker-s: 50%;
    --color-accent-darker-l: 35%;
    --color-accent-darker-hsl: 120, 50%, 35%;    
    --color-accent-dark: hsl(120, 50%, 40%);
    --color-accent-dark-h: 120;
    --color-accent-dark-s: 50%;
    --color-accent-dark-l: 40%;
    --color-accent-dark-hsl: 120, 50%, 40%;
    --color-accent: hsl(120, 50%, 45%);
    --color-accent-h: 120;
    --color-accent-s: 50%;
    --color-accent-l: 45%;
    --color-accent-hsl: 120, 50%, 45%;    
    --color-accent-light: hsl(120, 50%, 60%);
    --color-accent-light-h: 120;
    --color-accent-light-s: 50%;
    --color-accent-light-l: 60%;
    --color-accent-light-hsl: 120, 50%, 60%;
    --color-accent-lighter: hsl(120, 50%, 70%);
    --color-accent-lighter-h: 120;
    --color-accent-lighter-s: 50%;
    --color-accent-lighter-l: 70%;
    --color-accent-lighter-hsl: 120, 50%, 70%;
    --color-black: hsl(230, 13%, 9%);
    --color-black-h: 230;
    --color-black-s: 13%;
    --color-black-l: 9%;
    --color-black-hsl: 230, 13%, 9%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-white-hsl: 0, 0%, 100%;
    --color-success-darker: hsl(170, 78%, 26%);
    --color-success-darker-h: 170;
    --color-success-darker-s: 78%;
    --color-success-darker-l: 26%;
    --color-success-darker-hsl: 170, 78%, 26%;
    --color-success-dark: hsl(170, 78%, 31%);
    --color-success-dark-h: 170;
    --color-success-dark-s: 78%;
    --color-success-dark-l: 31%;
    --color-success-dark-hsl: 170, 78%, 31%;
    --color-success: hsl(170, 78%, 36%);
    --color-success-h: 170;
    --color-success-s: 78%;
    --color-success-l: 36%;
    --color-success-hsl: 170, 78%, 36%;
    --color-success-light: hsl(170, 78%, 42%);
    --color-success-light-h: 170;
    --color-success-light-s: 78%;
    --color-success-light-l: 42%;
    --color-success-light-hsl: 170, 78%, 42%;
    --color-success-lighter: hsl(170, 78%, 47%);
    --color-success-lighter-h: 170;
    --color-success-lighter-s: 78%;
    --color-success-lighter-l: 47%;
    --color-success-lighter-hsl: 170, 78%, 47%;
    --color-error-darker: hsl(342, 90%, 38%);
    --color-error-darker-h: 342;
    --color-error-darker-s: 89%;
    --color-error-darker-l: 38%;
    --color-error-darker-hsl: 342, 89%, 38%;
    --color-error-dark: hsl(342, 89%, 43%);
    --color-error-dark-h: 342;
    --color-error-dark-s: 89%;
    --color-error-dark-l: 43%;
    --color-error-dark-hsl: 342, 89%, 43%;
    --color-error: hsl(342, 89%, 48%);
    --color-error-h: 342;
    --color-error-s: 89%;
    --color-error-l: 48%;
    --color-error-hsl: 342, 89%, 48%;
    --color-error-light: hsl(4, 52%, 58%);
    --color-error-light-h: 4;
    --color-error-light-s: 52%;
    --color-error-light-l: 58%;
    --color-error-light-hsl: 4, 52%, 58%;    
    --color-error-lighter: hsl(4, 52%, 68%);
    --color-error-lighter-h: 4;
    --color-error-lighter-s: 52%;
    --color-error-lighter-l: 68%;
    --color-error-lighter-hsl: 4, 52%, 68%;    
    --color-warning-darker: hsl(35, 79%, 48%);
    --color-warning-darker-h: 35;
    --color-warning-darker-s: 79%;
    --color-warning-darker-l: 48%;
    --color-warning-darker-hsl: 35, 79%, 48%;
    --color-warning-dark: hsl(35, 79%, 56%);
    --color-warning-dark-h: 35;
    --color-warning-dark-s: 79%;
    --color-warning-dark-l: 56%;
    --color-warning-dark-hsl: 35, 79%, 56%;
    --color-warning: hsl(35, 79%, 66%);
    --color-warning-h: 35;
    --color-warning-s: 79%;
    --color-warning-l: 66%;
    --color-warning-hsl: 35, 79%, 66%;
    --color-warning-light: hsl(35, 79%, 74%);
    --color-warning-light-h: 35;
    --color-warning-light-s: 79%;
    --color-warning-light-l: 74%;
    --color-warning-light-hsl: 35, 79%, 74%;
    --color-warning-lighter: hsl(35, 79%, 82%);
    --color-warning-lighter-h: 35;
    --color-warning-lighter-s: 79%;
    --color-warning-lighter-l: 82%;
    --color-warning-lighter-hsl: 35, 79%, 82%;
    --color-bg-lighter: hsl(0, 0%, 100%);
    --color-bg-lighter-h: 0;
    --color-bg-lighter-s: 0%;
    --color-bg-lighter-l: 100%;
    --color-bg-lighter-hsl: 0, 0%, 100%;
    --color-bg-light: hsl(0, 0%, 100%);
    --color-bg-light-h: 0;
    --color-bg-light-s: 0%;
    --color-bg-light-l: 100%;
    --color-bg-light-hsl: 0, 0%, 100%;
    --color-bg: hsl(0, 0%, 100%);
    --color-bg-h: 0;
    --color-bg-s: 0%;
    --color-bg-l: 100%;
    --color-bg-hsl: 0, 0%, 100%;
    --color-bg-dark: hsl(240, 4%, 95%);
    --color-bg-dark-h: 240;
    --color-bg-dark-s: 4%;
    --color-bg-dark-l: 95%;
    --color-bg-dark-hsl: 240, 4%, 95%;
    --color-bg-darker: hsl(220, 23%, 85%);
    --color-bg-darker-h: 220;
    --color-bg-darker-s: 23%;
    --color-bg-darker-l: 85%;
    --color-bg-darker-hsl: 220, 23%, 85%;    
    --color-contrast-lower: hsl(240, 4%, 85%);
    --color-contrast-lower-h: 240;
    --color-contrast-lower-s: 4%;
    --color-contrast-lower-l: 85%;
    --color-contrast-lower-hsl: 240, 4%, 85%;
    --color-contrast-low: hsl(240, 4%, 65%);
    --color-contrast-low-h: 240;
    --color-contrast-low-s: 4%;
    --color-contrast-low-l: 65%;
    --color-contrast-low-hsl: 240, 4%, 65%;
    --color-contrast-medium: hsl(225, 4%, 47%);
    --color-contrast-medium-h: 225;
    --color-contrast-medium-s: 4%;
    --color-contrast-medium-l: 47%;
    --color-contrast-medium-hsl: 225, 4%, 47%;
    --color-contrast-high: hsl(230, 7%, 23%);
    --color-contrast-high-h: 230;
    --color-contrast-high-s: 7%;
    --color-contrast-high-l: 23%;
    --color-contrast-high-hsl: 230, 7%, 23%;
    --color-contrast-higher: hsl(0, 0%, 20%);
    --color-contrast-higher-h: 0;
    --color-contrast-higher-s: 0%;
    --color-contrast-higher-l: 20%;
    --color-contrast-higher-hsl: 0, 0%, 20%;
    
}