/* ------------------ File with CSS and Variables from new design system ------------------ */

:root {
    /* ANCHOR - TYPOGRAPHY  */
    --text-primary-regular: 'Inter Regular';
    --text-primary-medium: 'Inter Medium';
    --text-primary-semibold: 'Inter Semibold';
    --text-primary-bold: 'Inter Bold';

    --text-secondary-regular: 'Poppins Regular';
    --text-secondary-medium: 'Poppins Medium';
    --text-secondary-semibold: 'Poppins Semibold';
    --text-secondary-bold: 'Poppins Bold';


    /* ANCHOR - NEUTRAL */
    --ro-colors-neutral-dark-800: rgba(57, 71, 89, 1);
    --ro-colors-neutral-dark-500: rgba(86, 113, 145, 1);
    --ro-colors-neutral-dark-300: rgba(129, 147, 168, 1);
    --ro-colors-neutral-light-500: rgba(223, 229, 243, 1);
    --ro-colors-neutral-light-300: rgba(240, 243, 250, 1);
    --ro-colors-neutral-light-100: rgba(249, 251, 255, 1);

    --ro-colors-gray-500: rgba(218, 220, 224, 1);
    --ro-colors-gray-500-opacity-20: rgba(218, 220, 224, 0.2);

    --ro-colors-white: rgb(255 255 255);
    --ro-colors-white-opacity-4: rgb(255 255 255 / 0.04);
    --ro-colors-white-opacity-8: rgb(255 255 255 / 0.08);
    --ro-colors-white-opacity-20: rgb(255 255 255 / 0.2);
    --ro-colors-white-opacity-40: rgb(255 255 255 / 0.4);

    /* ANCHOR - SEMANTIC */
    --ro-colors-green-500: rgb(0, 221, 208);
    --ro-colors-green-600: rgb(23, 196, 190);
    --ro-colors-green-700: rgb(47, 169, 171);
    --ro-colors-green-500-opacity-8: rgba(0, 221, 208, 0.08);
    --ro-colors-green-500-opacity-20: rgba(0, 221, 208, 0.2);
    --ro-colors-green-500-opacity-40: rgba(0, 221, 208, 0.4);
    --ro-colors-red-500: rgba(247, 114, 114, 1);
    --ro-colors-red-600: rgba(232, 96, 96, 1);
    --ro-colors-red-700: rgba(199, 71, 71, 1);
    --ro-colors-red-500-opacity-8: rgba(247, 114, 114, 0.08);
    --ro-colors-red-500-opacity-20: rgba(247, 114, 114, 0.2);
    --ro-colors-red-500-opacity-40: rgba(247, 114, 114, 0.4);
    --ro-colors-orange-500: rgb(255, 157, 77);
    --ro-colors-orange-600: rgb(255, 135, 38);
    --ro-colors-orange-700: rgb(255, 123, 17);
    --ro-colors-orange-500-opacity-8: rgba(255, 157, 77, 0.08);
    --ro-colors-orange-500-opacity-20: rgba(255, 157, 77, 0.2);
    --ro-colors-orange-500-opacity-40: rgba(255, 157, 77, 0.4);
    --ro-colors-blue-500: rgb(94, 165, 233);
    --ro-colors-blue-600: rgb(72, 152, 231);
    --ro-colors-blue-700: rgb(32, 129, 226);
    --ro-colors-blue-500-opacity-8: rgba(94, 165, 233, 0.08);
    --ro-colors-blue-500-opacity-20: rgba(94, 165, 233, 0.2);
    --ro-colors-blue-500-opacity-40: rgba(94, 165, 233, 0.4);

    /* check 'orange term' with ux/ui  */
    --ro-colors-yellow-300: rgb(255, 197, 79);

    /* ANCHOR - PRODUCTS */
    --ro-colors-product-dashboard-500: rgba(29, 145, 237, 1);
    --ro-colors-product-dashboard-500-opacity-8: rgba(29, 145, 237, 0.08);
    --ro-colors-product-dashboard-500-opacity-20: rgba(29, 145, 237, 0.2);
    --ro-colors-product-dashboard-500-opacity-40: rgba(29, 145, 237, 0.4);
    --ro-colors-product-dashboard-600: rgba(17, 125, 215, 1);
    --ro-colors-product-dashboard-700: rgba(15, 107, 183, 1);
    --ro-colors-product-dashboard-dark-bg-400: rgba(36, 44, 44, 1);
    --ro-colors-product-dashboard-dark-bg-500: rgba(45, 50, 53, 1);
    --ro-colors-product-dashboard-dark-bg-600: rgba(36, 41, 45, 1);
    --ro-colors-product-dashboard-dark-bg-700: rgba(27, 32, 36, 1);
    --ro-colors-product-dashboard-dark-bg-800: rgba(19, 28, 36, 1);
    --ro-colors-product-dashboard-dark-bg-900: #12171b;

    --ro-colors-product-empower-500: rgba(127, 163, 254, 1);
    --ro-colors-product-empower-500-opacity-8: rgba(127, 163, 254, 0.08);
    --ro-colors-product-empower-500-opacity-20: rgba(127, 163, 254, 0.2);
    --ro-colors-product-empower-500-opacity-40: rgba(127, 163, 254, 0.4);
    --ro-colors-product-empower-600: rgba(98, 140, 246, 1);
    --ro-colors-product-empower-700: rgba(105, 138, 221, 1);
    --ro-colors-product-empower-dark-bg-400: rgba(57, 59, 61, 1);
    --ro-colors-product-empower-dark-bg-500: rgba(44, 46, 49, 1);
    --ro-colors-product-empower-dark-bg-600: rgba(35, 37, 40, 1);
    --ro-colors-product-empower-dark-bg-700: rgba(31, 33, 36, 1);
    --ro-colors-product-empower-dark-bg-800: rgba(27, 30, 37, 1);
    --ro-colors-product-empower-dark-bg-900: rgba(22, 24, 27, 1);

    --ro-colors-product-webapp-500: rgba(0, 221, 208, 1);
    --ro-colors-product-webapp-500-opacity-8: rgba(0, 221, 208, 0.08);
    --ro-colors-product-webapp-500-opacity-20: rgba(0, 221, 208, 0.2);
    --ro-colors-product-webapp-500-opacity-40: rgba(0, 221, 208, 0.4);
    --ro-colors-product-webapp-600: rgba(23, 196, 190, 1);
    --ro-colors-product-webapp-700: rgba(47, 169, 171, 1);
    --ro-colors-product-webapp-dark-bg-400: rgba(54, 61, 61, 1);
    --ro-colors-product-webapp-dark-bg-500: rgba(46, 53, 53, 1);
    --ro-colors-product-webapp-dark-bg-600: rgba(36, 44, 44, 1);
    --ro-colors-product-webapp-dark-bg-700: rgb(27, 35, 35);
    --ro-colors-product-webapp-dark-bg-800: rgb(17, 34, 33);
    --ro-colors-product-webapp-dark-bg-900: rgb(17, 26, 26);

    --ro-colors-product-graylabel-500: rgba(57, 71, 89, 1);
    --ro-colors-product-graylabel-500-opacity-8: rgba(57, 71, 89, 0.08);
    --ro-colors-product-graylabel-500-opacity-20: rgba(57, 71, 89, 0.2);
    --ro-colors-product-graylabel-500-opacity-40: rgba(57, 71, 89, 0.4);
    --ro-colors-product-graylabel-400: rgba(86, 113, 145, 1);
    --ro-colors-product-graylabel-300: rgba(129, 147, 168, 1);
    --ro-colors-product-graylabel-dark-bg-400: rgba(54, 61, 61, 1);
    --ro-colors-product-graylabel-dark-bg-500: rgba(46, 53, 53, 1);
    --ro-colors-product-graylabel-dark-bg-600: rgba(36, 44, 44, 1);
    --ro-colors-product-graylabel-dark-bg-700: rgb(27, 35, 35);
    --ro-colors-product-graylabel-dark-bg-800: rgb(17, 34, 33);
    --ro-colors-product-graylabel-dark-bg-900: rgb(17, 26, 26);

    /* ANCHOR - SIZES */
    --ro-size-1\/2: 2px;
    --ro-size-1: 4px;
    --ro-size-2: 8px;
    --ro-size-3: 12px;
    --ro-size-4: 16px;
    --ro-size-5: 20px;
    --ro-size-6: 24px;
    --ro-size-7: 28px;
    --ro-size-8: 32px;
    --ro-size-10: 40px;
    --ro-size-11: 44px;
    --ro-size-12: 48px;
    --ro-size-13: 52px;
    --ro-size-16: 64px;

    /* ANCHOR - BORDER RADIUS */
    --ro-radii-sm: var(--ro-size-1);
    --ro-radii-md: var(--ro-size-2);
    --ro-radii-lg: var(--ro-size-3);
    --ro-radii-xl: var(--ro-size-4);
    --ro-radii-2xl: var(--ro-size-6);
    --ro-radii-3xl: var(--ro-size-8);
    --ro-radii-circle: 50%;

    /* ANCHOR - FONT */
    --ro-font-text: 'Inter';

    /* ANCHOR - BASE-FONT-SIZES */
    --font-size-0: 0.60rem;
    --font-size-1: 0.72rem;
    --font-size-2: 0.8rem;
    --font-size-3: 0.92rem;
    --font-size-4: 1rem;
    --font-size-5: 1.125rem;
    --font-size-6: 1.5rem;
    --font-size-7: 2rem;
    --font-size-8: 2.2rem;
    --font-size-9: 3rem;

    /* ANCHOR - FONT SIZES */
    --ro-font-size-text-sm: 13px;
    --ro-font-size-text-md: var(--font-size-4);


    /* ANCHOR - FONT SIZE HEADING  */
    --ro-font-size-heading-xs: var(--font-size-4);
    --ro-font-size-heading-sm: var(--font-size-5);
    --ro-font-size-heading-md: var(--font-size-6);
    --ro-font-size-heading-lg: var(--font-size-7);
    --ro-font-size-heading-xl: var(--font-size-8);
    --ro-font-size-heading-2xl: var(--font-size-9);

    /* ANCHOR - ICON SIZES */
    --ro-icon-size-base: var(--ro-size-4);
    --ro-icon-size-lg: var(--ro-size-5);
    --ro-icon-size-xl: var(--ro-size-6);
    --ro-icon-size-2xl: var(--ro-size-8);
    --ro-icon-size-3xl: var(--ro-size-12);
    --ro-icon-size-4xl: var(--ro-size-16);

    /* ANCHOR - PADDINGS */
    --ro-padding-xs: var(--ro-size-1\/2);
    --ro-padding-sm: var(--ro-size-1);
    --ro-padding-md: var(--ro-size-2);
    --ro-padding-lg: var(--ro-size-3);
    --ro-padding-xl: var(--ro-size-4);
    --ro-padding-2xl: var(--ro-size-6);
    --ro-padding-3xl: var(--ro-size-8);


    /* ANCHOR - APP */
    --ro-colors-accent: var(--ro-colors-product-graylabel-500);
    --ro-colors-accent-light: var(--ro-colors-product-graylabel-500-opacity-8);
    --ro-colors-accent-hover: var(--ro-colors-product-graylabel-400);
    --ro-colors-accent-hover-light: var(--ro-colors-product-graylabel-500-opacity-20);
    --ro-colors-accent-active: var(--ro-colors-product-graylabel-300);
    --ro-colors-accent-active-light: var(--ro-colors-product-graylabel-500-opacity-40);
    --ro-colors-accent-active-foreground-light: var(--ro-colors-accent-active);
    --ro-colors-accent-foreground: var(--ro-colors-white);
    --ro-colors-accent-foreground-light: var(--ro-colors-accent);
    --ro-colors-accent-disabled: var(--ro-colors-gray-500);
    --ro-colors-accent-disabled-foreground: var(--ro-colors-neutral-dark-300);
    --ro-colors-accent-disabled-light: var(--ro-colors-gray-500-opacity-20);
    --ro-colors-accent-disabled-foreground-light: var(--ro-colors-gray-500);


    --ro-colors-info: var(--ro-colors-blue-500);
    --ro-colors-info-light: var(--ro-colors-blue-500-opacity-8);
    --ro-colors-info-hover: var(--ro-colors-blue-600);
    --ro-colors-info-hover-light: var(--ro-colors-blue-500-opacity-20);
    --ro-colors-info-active: var(--ro-colors-blue-700);
    --ro-colors-info-active-light: var(--ro-colors-blue-500-opacity-40);
    --ro-colors-info-active-foreground-light: var(--ro-colors-info-active);
    --ro-colors-info-foreground: var(--ro-colors-white);
    --ro-colors-info-foreground-light: var(--ro-colors-info);
    --ro-colors-info-disabled: var(--ro-colors-gray-500);

    --ro-colors-positive: var(--ro-colors-green-500);
    --ro-colors-positive-light: var(--ro-colors-green-500-opacity-8);
    --ro-colors-positive-hover: var(--ro-colors-green-600);
    --ro-colors-positive-hover-light: var(--ro-colors-green-500-opacity-20);
    --ro-colors-positive-active: var(--ro-colors-green-700);
    --ro-colors-positive-active-light: var(--ro-colors-green-500-opacity-40);
    --ro-colors-positive-active-foreground-light: var(--ro-colors-positive-active);
    --ro-colors-positive-foreground: var(--ro-colors-white);
    --ro-colors-positive-foreground-light: var(--ro-colors-positive);
    --ro-colors-positive-disabled: var(--ro-colors-gray-500);

    --ro-colors-warning: var(--ro-colors-orange-500);
    --ro-colors-warning-light: var(--ro-colors-orange-500-opacity-8);
    --ro-colors-warning-hover: var(--ro-colors-orange-600);
    --ro-colors-warning-hover-light: var(--ro-colors-orange-500-opacity-20);
    --ro-colors-warning-active: var(--ro-colors-orange-700);
    --ro-colors-warning-active-light: var(--ro-colors-orange-500-opacity-40);
    --ro-colors-warning-active-foreground-light: var(--ro-colors-warning-active);
    --ro-colors-warning-foreground: var(--ro-colors-white);
    --ro-colors-warning-foreground-light: var(--ro-colors-warning);
    --ro-colors-warning-disabled: var(--ro-colors-gray-500);

    --ro-colors-negative: var(--ro-colors-red-500);
    --ro-colors-negative-light: var(--ro-colors-red-500-opacity-8);
    --ro-colors-negative-hover: var(--ro-colors-red-600);
    --ro-colors-negative-hover-light: var(--ro-colors-red-500-opacity-20);
    --ro-colors-negative-active: var(--ro-colors-red-700);
    --ro-colors-negative-active-light: var(--ro-colors-red-500-opacity-40);
    --ro-colors-negative-active-foreground-light: var(--ro-colors-negative-active);
    --ro-colors-negative-foreground: var(--ro-colors-white);
    --ro-colors-negative-foreground-light: var(--ro-colors-negative);
    --ro-colors-negative-disabled: var(--ro-colors-gray-500);

    --ro-colors-bg-0: var(--ro-colors-white);
    --ro-colors-bg-1: var(--ro-colors-neutral-light-100);
    --ro-colors-overlay-1: var(--ro-colors-white);
    --ro-colors-overlay-2: var(--ro-colors-neutral-light-100);
    --ro-colors-overlay-3: var(--ro-colors-neutral-light-300);

    --ro-colors-border-accuented: var(--ro-colors-neutral-light-500);

}

:has(input[name="mode"][value="dark"]:checked),
[mode="dark"] {
    color-scheme: dark;

    --ro-colors-neutral-dark-800: var(--ro-colors-white);
    --ro-colors-neutral-dark-500: var(--ro-colors-white-opacity-68);
    --ro-colors-neutral-dark-300: var(--ro-colors-white-opacity-40);
    --ro-colors-neutral-light-500: var(--ro-colors-white-opacity-20);
    --ro-colors-neutral-light-300: var(--ro-colors-white-opacity-8);
    --ro-colors-neutral-light-100: var(--ro-colors-white-opacity-4);

    --ro-colors-accent: var(--ro-colors-product-graylabel-300);
    --ro-colors-accent-light: var(--ro-colors-product-graylabel-500-opacity-8);
    --ro-colors-accent-hover: var(--ro-colors-product-graylabel-500);
    --ro-colors-accent-hover-light: var(--ro-colors-product-graylabel-500-opacity-20);
    --ro-colors-accent-active: var(--ro-colors-product-graylabel-400);
    --ro-colors-accent-active-light: var(--ro-colors-product-graylabel-500-opacity-40);
    --ro-colors-accent-disabled: var(--ro-colors-gray-500);
    --ro-colors-accent-disabled-foreground: var(--ro-colors-white-opacity-20);
    --ro-colors-accent-disabled-light: var(--ro-colors-white-opacity-4);
    --ro-colors-accent-disabled-foreground-light: var(--ro-colors-white-opacity-20);

    --ro-colors-bg-0: var(--ro-colors-product-graylabel-dark-bg-800);
    --ro-colors-bg-1: var(--ro-colors-product-graylabel-dark-bg-900);
    --ro-colors-overlay-1: var(--ro-colors-product-graylabel-dark-bg-700);
    --ro-colors-overlay-2: var(--ro-colors-product-graylabel-dark-bg-600);
    --ro-colors-overlay-3: var(--ro-colors-product-graylabel-dark-bg-500);

    --ro-colors-accent-disabled: var(--ro-colors-white-opacity-20);
    --ro-colors-border-accuented: var(--ro-colors-white-opacity-20);

}

/* THEME EMPOWER */

:has(input[name="theme"][value="empower"]:checked),
[theme="empower"] {
    accent-color: var(--ro-colors-accent);

    --ro-colors-accent: var(--ro-colors-product-empower-500);
    --ro-colors-accent-light: var(--ro-colors-product-empower-500-opacity-8);
    --ro-colors-accent-hover: var(--ro-colors-product-empower-600);
    --ro-colors-accent-hover-light: var(--ro-colors-product-empower-500-opacity-20);
    --ro-colors-accent-active: var(--ro-colors-product-empower-700);
    --ro-colors-accent-active-light: var(--ro-colors-product-empower-500-opacity-40);
    --ro-colors-accent-foreground: var(--ro-colors-white);
}

:has(input[name="theme"][value="empower"]:checked):has(input[name="mode"][value="dark"]:checked),
[mode="dark"][theme="empower"] {
    --ro-colors-accent: var(--ro-colors-product-empower-700);
    --ro-colors-accent-light: var(--ro-colors-product-empower-500-opacity-8);
    --ro-colors-accent-hover: var(--ro-colors-product-empower-500);
    --ro-colors-accent-hover-light: var(--ro-colors-product-empower-500-opacity-20);
    --ro-colors-accent-active: var(--ro-colors-product-empower-600);
    --ro-colors-accent-active-light: var(--ro-colors-product-empower-500-opacity-40);
    --ro-colors-bg-0: var(--ro-colors-product-empower-dark-bg-800);
    --ro-colors-bg-1: var(--ro-colors-product-empower-dark-bg-900);
    --ro-colors-overlay-1: var(--ro-colors-product-empower-dark-bg-700);
    --ro-colors-overlay-2: var(--ro-colors-product-empower-dark-bg-600);
    --ro-colors-overlay-3: var(--ro-colors-product-empower-dark-bg-500);
}

/* THEME WEBAPP */

:has(input[name="theme"][value="webapp"]:checked),
[theme="webapp"] {
    accent-color: var(--ro-colors-accent);

    --ro-colors-accent: var(--ro-colors-product-webapp-500);
    --ro-colors-accent-light: var(--ro-colors-product-webapp-500-opacity-8);
    --ro-colors-accent-hover: var(--ro-colors-product-webapp-600);
    --ro-colors-accent-hover-light: var(--ro-colors-product-webapp-500-opacity-20);
    --ro-colors-accent-active: var(--ro-colors-product-webapp-700);
    --ro-colors-accent-active-light: var(--ro-colors-product-webapp-500-opacity-40);
    --ro-colors-accent-foreground: var(--ro-colors-white);
}

:has(input[name="theme"][value="webapp"]:checked):has(input[name="mode"][value="dark"]:checked),
[mode="dark"][theme="webapp"] {
    --ro-colors-accent: var(--ro-colors-product-webapp-700);
    --ro-colors-accent-light: var(--ro-colors-product-webapp-500-opacity-8);
    --ro-colors-accent-hover: var(--ro-colors-product-webapp-500);
    --ro-colors-accent-hover-light: var(--ro-colors-product-webapp-500-opacity-20);
    --ro-colors-accent-active: var(--ro-colors-product-webapp-600);
    --ro-colors-accent-active-light: var(--ro-colors-product-webapp-500-opacity-40);
    --ro-colors-bg-0: var(--ro-colors-product-webapp-dark-bg-800);
    --ro-colors-bg-1: var(--ro-colors-product-webapp-dark-bg-900);
    --ro-colors-overlay-1: var(--ro-colors-product-webapp-dark-bg-700);
    --ro-colors-overlay-2: var(--ro-colors-product-webapp-dark-bg-600);
    --ro-colors-overlay-3: var(--ro-colors-product-webapp-dark-bg-500);
}

/* THEME GRAY LABEL */
:has(input[name="theme"][value="graylabel"]:checked),
[theme="graylabel"] {
    accent-color: var(--ro-colors-accent);

    --ro-colors-accent: var(--ro-colors-product-graylabel-500);
    --ro-colors-accent-light: var(--ro-colors-product-graylabel-500-opacity-8);
    --ro-colors-accent-hover: var(--ro-colors-product-graylabel-400);
    --ro-colors-accent-hover-light: var(--ro-colors-product-graylabel-500-opacity-20);
    --ro-colors-accent-active: var(--ro-colors-product-graylabel-300);
    --ro-colors-accent-active-light: var(--ro-colors-product-graylabel-500-opacity-40);
    --ro-colors-accent-foreground: var(--ro-colors-white);
}

:has(input[name="theme"][value="graylabel"]:checked):has(input[name="mode"][value="dark"]:checked),
[mode="dark"][theme="graylabel"] {
    --ro-colors-accent: var(--ro-colors-product-graylabel-500);
    --ro-colors-accent-light: var(--ro-colors-product-graylabel-500-opacity-8);
    --ro-colors-accent-hover: var(--ro-colors-product-graylabel-400);
    --ro-colors-accent-hover-light: var(--ro-colors-product-graylabel-500-opacity-20);
    --ro-colors-accent-active: var(--ro-colors-product-graylabel-300);
    --ro-colors-accent-active-light: var(--ro-colors-product-graylabel-500-opacity-40);
    --ro-colors-bg-0: var(--ro-colors-product-graylabel-dark-bg-800);
    --ro-colors-bg-1: var(--ro-colors-product-graylabel-dark-bg-900);
    --ro-colors-overlay-1: var(--ro-colors-product-graylabel-dark-bg-700);
    --ro-colors-overlay-2: var(--ro-colors-product-graylabel-dark-bg-600);
    --ro-colors-overlay-3: var(--ro-colors-product-graylabel-dark-bg-500);
}

/* CHECKBOX */
.ro-input-checkbox {
    --_bg: var(--ro-cb-bg, var(--ro-colors-accent));
    --_border-color: var(--ro-cb-border-color, var(--ro-colors-accent));
    --_radius: var(--ro-cb-radius, var(--ro-radii-sm));
    --_size: var(--ro-cb-size, var(--ro-size-5));
    appearance: none;
    border: 1px solid var(--_border-color);
    border-radius: var(--_radius);
    width: var(--_size);
    aspect-ratio: 1;
    vertical-align: middle;
    transition: background-color 0.2s ease-in-out, background-image 0.2s;
}

.ro-input-checkbox:checked {
    background-image: url(/img/iconsLib.svg#icon-check);
    background-color: var(--_bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
}

.ro-input-checkbox:disabled {
    --ro-cb-border-color: var(--ro-colors-accent-disabled);
}

.ro-input-checkbox:checked:disabled {
    --ro-cb-bg: var(--ro-colors-accent-disabled);
}

label:has(.ro-input-checkbox) {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 0;
}