/**
 * @name Cyan
 * @description Powerful UX, stunning visuals, like never before
 * @author DaBluLite
 * @authorId 582170007505731594
 * @version 7.0.0
 * @updateUrl https://dablulite.github.io/Cyan/Cyan.theme.css
 * @source https://github.com/DaBluLite/Cyan
 * @invite 67VRpSjzxU
 * @colorwayVar cyan-accent-color {{accent}}
 * @colorwayVar cyan-background-primary hsl({{primary-h}} calc(var(--saturation-factor, 1)*{{primary-s}}%) {{primary-l}}%/60%)
 * @colorwayVar cyan-second-layer hsl({{tertiary-h}} calc(var(--saturation-factor, 1)*{{tertiary-s}}%) min(calc({{tertiary-l}}% + 7.2%), 100%)/60%)
 */
 
@import url("https://dablulite.github.io/Cyan/import.css");

:root {
	--cyan-interface-shadow: 0 4px 10px 0 rgb(0 0 0 / 40%);
	--cyan-font: 'Montserrat', 'Open Sans';
	--cyan-background-img: url("https://github.com/DaBluLite/Cyan/blob/next/cyan-ocean-waves.png?raw=true");
	--cyan-accent-color: #009f88;
	--cyan-blur: 16px;
    --cyan-radius-round-interface: 50px;
    --cyan-radius-interface: 24px;
    --cyan-radius-xl: 20px;
    --cyan-radius-large: 16px;
    --cyan-radius-medium: 12px;
    --cyan-radius-small: 8px;
    --cyan-radius-xs: 4px;
    --cyan-loading-header: "Getting up to speed...";
}

.theme-dark,
.theme-dark .theme-light {
    --cyan-second-layer: rgb(0 0 0/60%);
    --cyan-background-primary: hsla(0deg 100% 0% / 60%);
    --cyan-bg-brightness: .7;
    --cyan-second-layer-thin: hsl(240 4% 60.784%/0.12156862745098039);
    --cyan-second-layer-thin-hover: hsl(240 4% 60.784%/0.2);
    --cyan-second-layer-thin-active: hsl(234.545 6.509% 33.137%/0.3);
}

.theme-light {
    --cyan-second-layer: rgb(255 255 255/60%);
    --cyan-background-primary: hsla(0deg 100% 100% / 60%);
    --cyan-second-layer-thin: hsl(240 4% 60.784%/0.1607843137254902);
    --cyan-second-layer-thin-hover: hsl(240 4% 60.784%/0.2784313725490196);
    --cyan-second-layer-thin-active: hsl(233.333 3.734% 52.745%/0.08);
}

.theme-darker,
.theme-darker .theme-light {
    --cyan-second-layer: rgb(0 0 0/75%);
    --cyan-background-primary: hsla(0deg 100% 0% / 75%);
    --cyan-bg-brightness: .4;
    --cyan-second-layer-thin: hsl(240 4% 70.784%/0.12156862745098039);
    --cyan-second-layer-thin-hover: hsl(240 4% 70.784%/0.2);
    --cyan-second-layer-thin-active: hsl(234.545 6.509% 45.137%/0.3);
}

.theme-midnight,
.theme-midnight .theme-light {
    --cyan-second-layer: rgb(0 0 0/90%);
    --cyan-background-primary: hsla(0deg 100% 0% / 90%);
    --cyan-bg-brightness: .1;
    --cyan-second-layer-thin: hsl(240 4% 70.784%/0.12156862745098039);
    --cyan-second-layer-thin-hover: hsl(240 4% 70.784%/0.2);
    --cyan-second-layer-thin-active: hsl(234.545 6.509% 45.137%/0.3);
}