@import "commons.css";

@import "container.css";

@import "container_items.css";

@import "text.css";

@import "components/index.css";

:root {
	color-scheme: light dark;
	
	--white: #FFFFFF;				/* FFFFFF */
	--seasalt: #F8F8F8;			/* Seasalt/offwhite F8F8F8 */
	--afwhite: #EFEFEF;			/* Anti-flash white/doffwhite EFEFEF */
	--platinum: #E6E6E6;			/* Platinum/lgrey E6E6E6 */
	--grey: #CCCCCC;				/* Grey CCCCCC */
	--cgrey: #A0A0A0;				/* Cadet Grey A0A0A0 */
	--bgrey: #888888;				/* Battleship gray/dgrey 888888 */
	--ired: #FC4444;				/* Imperial red FC4444*/
	--ablue: #44A9fC;				/* Argentinian Blue 44A9fC */
	--emerald: #3DDC84;			/* Emerald 3DDC84 */
	--rgrande: #BDC403;			/* Rio Grande BDC403 */
	--ired_1a: #FC44441A;			/* Imperial red FC4444*/
	--rblack: #202124;				/* Raisin black 202124 */
	--lrblack: #29292D;			/* Light Raisin black 29292D */
	--eblack: #1E1E1E;				/* Eerie black 1E1E1E */
	--eblack_1a: #1E1E1E1A;
	--eblack_40: #1E1E1E40;
	--black: #000000;				/* 000000 */
	--inverted_text_colour: var(--seasalt);
	
	--accent_colour: var(--ired);

	--background_colour: var(--seasalt);
	--colour: var(--rblack);

	/* CONTAINER */
	--container_p: 16px;
	--preffered_padding_v: 16px;
	--preffered_padding_h: 16px;
	--preffered_padding: var(--preffered_padding_v) var(--preffered_padding_h);
	--preffered_margin_v: 16px;
	--preffered_margin_h: 16px;
	--preffered_margin: var(--preffered_margin_v) var(--preffered_margin_h);

	--shadow: 0px 0px 16px 1px var(--eblack_1a);
	--tilted_shadow: 3px 3px 16px 1px var(--eblack_1a);
	--inset_shadow: 0px 0px 0px 1px var(--eblack_1a) inset;
	--border_radius: 16px;


	/* BUTTON */
	--button__colour: var(--rblack);
	--button__padding_v: 12px;
	--button__padding_h: 16px;
	--button__gap: 8px;
	--button__background_colour: transparent;
	--button_has_background__background_colour: var(--accent_colour);
	--button_has_background__colour: var(--rblack);
	--button__border_radius: 8px;
	--button_hover__background_colour: var(--rblack);
	--button_hover__colour: var(--seasalt);
	--button_small__padding_v: 8px;
	--button_small__padding_h: 12px;
	--button_with_icon_animate__gap: 24px;
	--button_with_icon__font_size: 16px;
	--button__border_width: 2px;
	--button__border_colour: var(--colour);
	--button__border: var(--button__border_width) solid var(--button__border_colour);
	--ibutton__padding_fs: 22px;
	--ibutton__padding_v: 4px;
	--ibutton__padding_h: 4px;
	--ibutton__w: 32px;
	--ibutton__h: 32px;
	--ibutton_hover__background_colour: var(--rblack);
	--ibutton_hover__colour: var(--seasalt);
	--button__shadow: 2px 2px 16px 1px var(--eblack_40);


	/* CARD */
	--card__padding_v: 16px;
	--card__padding_h: 16px;
	--card__margin_v: 0;
	--card__margin_h: 0;
	--card__border_width: none;
	--card__border_colour: transparent;
	--card__border: var(--card__border_width) solid var(--card__border_colour);
	--card__border_radius: var(--border_radius);
	--card__shadow: 0 0 16px 1px var(--eblack_40);


	/* CHECKBOX */
	--checkbox__height: 22px;
	--checkbox_small__height: 16px;
	--checkbox_track__background_colour: var(--grey);
	--checkbox_thumb__background_colour: var(--seasalt);
	--checkbox__transition: all 300ms ease-in-out;
	--checkbox_disabled_track__background_colour: var(--grey);
	--checkbox_disabled_thumb__background_colour: var(--bgrey);
	--checkbox_disabled__background_colour: var(--grey);
	--checkbox_checked_track__background_colour: var(--rblack);


	/* DIALOG */
	--dialog__padding: 24px;
	--dialog__min_width: 400px;
	--dialog__max_width: 50vw;
	--dialog__transition: all 0.3s ease-in-out;
	--dialog_menu__padding: 0;


	/* INPUT */
	--input__background_color: transparent;
	--input__padding_v: 8px;
	--input__padding_h: 8px;
	--input__border: 1px solid var(--grey);
	--input__border_radius: 6px;
	--input_focus__border: 1px solid var(--rblack);


	/* LOADER */
	--loader__width: 2rem;
	--loader__min_width: 2rem;
	--loader_track__colour: #f3f3f3;
	--loader_track__width: 0.4em;
	--loader_thumb__colour: var(--rblack);
	--loader__timing_function: ease-in-out;
	--loader__duration: 2s;


	/* NOTIFY */
	--notify__background_colour: var(--rblack);
	--notify__colour: var(--seasalt);
	--notify__padding: 8px;
	--notify__gap: 4px;
	--notify__br: 4px;
	--notify__bs: 4px 4px 16px 2px var(--rblack);
	--notify__transition: all 0.3s ease-in-out;
	--notify__right: 2rem;
	--notify__bottom: 4rem;
	--notify__zindex: 20;
	--notify_icon__w: 22px;
	--notify_icon__h: 22px;
	--notify_icon_info__c: var(--ablue);
	--notify_icon_done__c: var(--emerald);
	--notify_icon_error__c: var(--ired);
	--notify_icon_warn__c: var(--rgrande);
}

:root[data-theme="dark"] {
	--background_colour: var(--lrblack);
	--colour: var(--seasalt);

	/* CONTAINER */
	--shadow: 0px 0px 16px 1px var(--eblack_1a);
	--tilted_shadow: 3px 3px 16px 1px var(--eblack_1a);
	--inset_shadow: 0px 0px 0px 1px var(--eblack_1a) inset;


	/* BUTTON */
	--button__colour: var(--rblack);
	--button__background_colour: transparent;
	--button__border_colour: var(--colour);
	--button__border: var(--button__border_width) solid var(--button__border_colour);
	--button__shadow: 2px 2px 16px 1px var(--eblack_40);
	--button_has_background__background_colour: var(--grey);
	--button_has_background__colour: var(--rblack);
	--button_hover__background_colour: var(--cgrey);
	--button_hover__colour: var(--seasalt);
	--ibutton_hover__background_colour: var(--cgrey);
	--ibutton_hover__colour: var(--seasalt);


	/* CARD */
	--card__border: var(--card__border_width) solid var(--card__border_colour);
	--card__shadow: 0 0 16px 1px var(--eblack_40);


	/* CHECKBOX */
	--checkbox_track__background_colour: var(--grey);
	--checkbox_thumb__background_colour: var(--seasalt);
	--checkbox_disabled_track__background_colour: var(--grey);
	--checkbox_disabled_thumb__background_colour: var(--bgrey);
	--checkbox_disabled__background_colour: var(--grey);
	--checkbox_checked_track__background_colour: var(--rblack);


	/* DIALOG */


	/* INPUT */
	--input__border: 1px solid var(--bgrey);
	--input_focus__border: 1px solid var(--platinum);


	/* LOADER */
	--loader_track__colour: #f3f3f3;
	--loader_thumb__colour: var(--rblack);


	/* NOTIFY */
	--notify__background_colour: var(--rblack);
	--notify__colour: var(--seasalt);
}


* {
	box-sizing: border-box;
}

body {
	background-color: var(--background_colour);
	margin: 0;
	color: var(--colour);
}

body:has(._aside._expanded) {
    overflow: hidden;
}