/* Default root var's */
:root {
	/* Colors */
	--color-bg: #121212;
	--color-primary: rgba(27, 27, 27, .8);
	--color-secondary: rgb(46, 46, 46, .5);
    --color-hoverBtn: #44484f;
    --color-accent: #aa15fa;
    --color-text: #f9fafb;
    --color-muted: #6b7280;
    --color-border: #1f2937;
    --color-success: #22c55e;
    --color-danger: #ef4444;
    --color-warning: #f97316;


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

	/* Radius */
	--radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 50%;

	/* 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: 16px;
    --padding-sm: 8px;
    --gap-sm: 8px;
    --gap: 16px;
    --gap-lg: 32px;
}

/* Default html styles */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) var(--color-bg);
}

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    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;
}

    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;
        }

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

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

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);
    display: flex;
    justify-content: center;
    align-items: center;
}

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%;
}

    .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 {
    padding:var(--padding);
    background:var(--color-danger);
    gap: var(--gap);
    flex-direction: column;
}


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

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

#tooltip {
    background-color: var(--color-secondary);
}

.noSel {
  /* Disable text selection */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  /* Disable image dragging */
  -webkit-user-drag: none;
  pointer-events: none;
}