/* Default root var's */
:root {
	/* Colors */
	--color-bg: #121212;
	--color-primary: #1b1b1b;
	--color-secondary: #2e2e2e;
	--color-misc: #1a1b26;
	--color-accent: #703fa1;
	--color-text: #ffffff;
	--color-muted: #6b7280;
	--color-border: #e6e9ef;
	--color-success: #10b981;
	--color-danger: #ef4444;
	--color-warning: #e15e0d;
    --color-codeBox: #1e1e2b;

	/* Typography */
	--font-sans: "Outfit";
	--font-mono: "Inconsolata";
	--font-size-base: 1rem;
	--line-height-base: 1.5;

	/* Radius */
	--radius-sm: 5px;
	--radius-md: 15px;
	--radius-lg: 25px;

	/* Elevation / shadow */
	--shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
	--shadow-md: 0 4px 12px rgba(16,24,40,0.08);
	--shadow-lg: 0 12px 24px rgba(16,24,40,0.12);

	/* Transitions */
    --ease-default: 200ms;
	--ease-fast: 150ms;
	--ease-medium: 300ms;
	--ease-slow: 450ms;

    /* hovers */
    --hover-scale-btn: 1.03;

    /* Misc */
    --padding: 15px;
    --padding-sm: 5px;
    --gap: 12px;
    --gap-sm: 5px;
    --gap-bg: 20px;
    --icon-brigtness: brightness(1);
}

:root.whiteMode {
    /* Colors */
	--color-bg: #f3e1ef;
	--color-primary: #D8CAD5;
	--color-secondary: #cccccc;
	--color-misc: #261f31;
	--color-accent: #C48BAE;
	--color-text: #000000;
	--color-muted: #6b7280;
	--color-border: #e6e9ef;
	--color-success: #10b981;
	--color-danger: #ef4444;
	--color-warning: #e15e0d;
    --color-codeBox: #1e1e2b;
    --icon-brigtness: brightness(0);
}

:root.darkerMode {
    /* Colors */
	--color-bg: #0E0F0F;
	--color-primary: #141617;
	--color-secondary: #2e2e2e;
	--color-misc: #261f31;
	--color-accent: #703fa1;
	--color-text: #f0ede3;
	--color-muted: #6b7280;
	--color-border: #e6e9ef;
	--color-success: #10b981;
	--color-danger: #ef4444;
	--color-warning: #e15e0d;
    --color-codeBox: #1e1e2b;
    --icon-brigtness: brightness(1);
}

/* Default html styles */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) var(--color-bg);
    height: 100vh;
    height: 100dvh;
}

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    background-color: var(--color-bg);
}

figure.spacer-w,
figure.spacer-h {
    all: unset;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

    figure.spacer-w {
        width: 100%;
        height: 1px;
    }

    figure.spacer-h {
        width: 1px;
        height: 100%;
    }

        figure.spacer-w::after,
        figure.spacer-h::after {
            content: '';
            background-color: var(--color-muted);
            position: relative;
            opacity: .2;
        }

        figure.spacer-w::after {
            width: 100%;
            height: 100%;
        }

        figure.spacer-h::after {
            width: 100%;
            height: 100%;
        }

img {
    user-select: none;
    -webkit-user-drag: none;  
    -moz-user-drag: none; 
    pointer-events: none;
}

button {
    all: unset;
    cursor: pointer;
    padding: var(--padding);
    background-color: var(--color-secondary);
    border-radius: var(--radius-md);
    transition: filter var(--ease-default);
}

button:hover { filter: brightness(1.1); }

.btn-secondary { background-color: var(--color-primary); }

.hover-scale { transition: scale var(--ease-default); }
.hover-scale:hover { scale: var(--hover-scale-btn); }

.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img_contain,
.img_cover {
    width: 100%;
    height: 100%;
    display: block;
}

    .img_contain { object-fit: contain; }
    .img_cover { object-fit: cover; }


:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-md);
}

.op0-2 { opacity: .2; }
.op0-5 { opacity: .5; }
.op0-8 { opacity: .8; }

.no-js-warning {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: fit-content;
    padding:var(--padding-sm);
    background:var(--color-danger);
    gap: var(--gap);
    flex-direction: column;
    z-index: 9999;
}











.allContainer {
    display: grid;
    grid-template-columns: 225px 1fr;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    transition: grid-template-columns var(--ease-medium);
}

.navHidden {
    grid-template-columns: 50px 1fr;
}

/* Reduced motion — toggled via .reduced-motion class on :root */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
    transition: none !important;
    animation: none !important;
}



.icon {
    filter: var(--icon-brigtness);
    aspect-ratio: 1 / 1;
    width: 1rem;
}

.iconNoSize { filter: var(--icon-brigtness); }
.iconNoFilter { filter: unset !important; }

.betaMsgContainerHidden {
    display: none !important;
}

#saveNotesBtn {
    display: none;
}

.ez-toast-container spans {
    color: var(--color-text) !important;
}

.ez-toast {
    color: var(--color-text) !important;
}