[data-theme="light"] {
    --modal-surface: var(--surface4);
    --modal-bg: hsl(var(--hue) 18% 78% / 80%);
    --modal-box-shadow: 0 5px 25px -15px hsl(var(--hue), 20%, 40%);
    --dropdown-shadow: var(--dropdown-shadow-light);
    --files-svg-active-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .1));
    --theme-contrast-rotate: 45deg;
    --hsl-primary: var(--hsl-primary-light);
}

[data-theme="light"], [data-theme="contrast"] {
    color-scheme: light;
    --text1: var(--text1-light);
    --text2: var(--text2-light);
    --text3: var(--text3-light);
    --surface1: var(--surface1-light);
    --surface2: var(--surface2-light);
    --surface3: var(--surface3-light);
    --surface4: var(--surface4-light);
    --files-border-bottom: var(--files-border-bottom-light);
    --img-placeholder-bg: var(--img-placeholder-bg-light);
    --color-danger: var(--color-danger-light);
    --color-info: var(--color-info-light);
    --color-success: var(--color-success-light);
    --popup-bg: var(--popup-bg-light);
    --rgb-theme: var(--rgb-theme-light);
    --rgb-theme-invert: var(--rgb-theme-invert-light);
    --svg-file-bg: hsl(60, 17%, calc(98% - 12%));
    --svg-file-flip: hsl(52, 16%, calc(98% - 20%));
    --svg-file-icon: hsl(19, 13%, calc(98% - 27%));
    --svg-folder-bg: hsl(var(--hue), 45%, 55%);
    --svg-folder-fg: hsl(var(--hue), 50%, 65%);
    --svg-folder-bg-large: hsl(var(--hue), 50%, 65%);
    --svg-folder-fg-large: hsl(var(--hue), 55%, 75%);
    --type-default: hsl(var(--hue), 15%, 65%);
    --type-application: hsl(var(--hue), 65%, 55%);
    --type-archive: hsl(39, 76%, 60%);
    --type-audio: hsl(21, 77%, 55%);
    --type-excel: hsl(135, 30%, 59%);
    --type-word: hsl(205, 84%, 59%);
    --type-pdf: hsl(359, 50%, 55%);
    --type-cd: hsl(15, 72%, 70%);
    --type-code: hsl(10, 69%, 62%);
    --type-text: hsl(210, 50%, 60%);
    --type-open_in_new: var(--type-text);
    --type-powerpoint: hsl(13, 65%, 51%);
    --type-font: hsl(286, 45%, 65%);
    --type-video: hsl(357, 79%, 65%);
    --type-youtube: hsl(0, 90%, 55%);
    --type-vimeo: hsl(195, 83%, 51%);
    --type-image: hsl(92, 36%, 58%);
    --svg-image-text-bg: hsl(92, 32%, 50%);
    --svg-image-sun: hsl(48, 85%, 65%);
    --font-weight-bold: 500;
    --font-weight-letter-spacing: normal;
    --surface-list-hover: var(--surface1-light);
	--primary: hsl(var(--hsl-primary));	
}

:root {
	--hue: 210;
    --hsl-primary-dark: var(--hue) 50% 45%;
    --hsl-primary-contrast: var(--hue) 45% 50%;
    --hsl-primary-light: var(--hue) 55% 55%;
    --text-base-lightness-light: 30%;
    --text1-light: hsl(var(--hue), 20%, var(--text-base-lightness-light));
    --text2-light: hsl(210, 17%, calc(30% + 15%));
    --text3-light: hsl(210, 15%, calc(30% + 30%));
    --surface-base-lightness-light: 98%;
    --surface1-light: hsl(210, 20%, calc(98% + -8%));
    --surface2-light: hsl(210, 20%, calc(98% + -3%));
    --surface3-light: hsl(var(--hue), 20%, var(--surface-base-lightness-light));
    --surface4-light: white;
    --files-border-bottom-light: 0 1px 0 0 hsl(210, 20%, calc(98% + -12%));
    --img-placeholder-bg-light: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path fill='hsl(210, 16%, 84%)' d='M40 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v26c0 2.2-1.8 4-4 4z'/><circle fill='hsl(210, 15%, 95%)' cx='35' cy='16' r='3'/><path fill='hsl(210, 16%, 62%)' d='M20 16L9 32h22z'/><path fill='hsl(210, 15%, 73%)' d='M31 22l-8 10h16z'/></svg>);
    --color-danger-light: hsl(0, 60%, 55%);
    --color-info-light: var(--text1);
    --color-success-light: hsl(105, 30%, 50%);
    --popup-bg-light: black;
    --dropdown-shadow-light: 0 8px 25px -10px hsl(var(--hue), 60%, 10%);
    --rgb-theme-light: 255, 255, 255;
    --rgb-theme-invert-light: 0, 0, 0;
    --text-base-lightness-dark: 80%;
    --text1-dark: hsl(var(--hue), 20%, var(--text-base-lightness-dark));
    --text2-dark: hsl(210, 17%, calc(84% + -15%));
    --text3-dark: hsl(210, 14%, calc(84% + -30%));
    --surface-base-lightness-dark: 8%;
    --surface1-dark: hsl(var(--hue), 20%, var(--surface-base-lightness-dark));
    --surface2-dark: hsl(210, 20%, calc(12% + 2%));
    --surface3-dark: hsl(210, 20%, calc(12% + 4%));
    --surface4-dark: hsl(210, 20%, calc(12% + 6%));
    --files-border-bottom-dark: 0 0 0 0 transparent;
    --img-placeholder-bg-dark: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path fill='hsl(210, 20%, 20%)' d='M40 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v26c0 2.2-1.8 4-4 4z'/><circle fill='hsl(210, 20%, 50%)' cx='35' cy='16' r='3'/><path fill='hsl(210, 20%, 30%)' d='M20 16L9 32h22z'/><path fill='hsl(210, 20%, 40%)' d='M31 22l-8 10h16z'/></svg>);
    --color-danger-dark: hsl(0, 50%, 45%);
    --color-info-dark: hsl(210, 20%, calc(12% + 12%));
    --color-success-dark: hsl(105, 30%, 45%);
    --popup-bg-dark: black;
    --dropdown-shadow-dark: 0 10px 40px -15px black;
    --rgb-theme-dark: 0, 0, 0;
    --rgb-theme-invert-dark: 255, 255, 255;
    --surface-active: var(--surface3);
    --primary: hsl(var(--hue), 50%, 50%);
    --border-color: rgba(var(--rgb-theme-invert), .05); 

	--font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-family-monospace: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', /*'Courier New',*/ monospace;
}