/*
	This-is-not-really-a-framework Framework :)
	Copyright (c) The Internet since NineTeenNightySix

	TODO: Continue philosophizing about what one would *actually* need, what is core; what needs to change often and what is just ... not.
*/

/*  dependencies :( */
@import url('https://cdn.jsdelivr.net/gh/tommiehansen/base/css/tailwind_css_colors.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.0.2/inter-variable.min.css');

/*----------------------------------------

	# RESET
	
----------------------------------------*/

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; line-height: calc(1em + 0.6rem); }


:root {
	--s: 2rem;
	--spacing: var(--s);
	--spacing-l: calc(var(--s) * 1.5);
	--spacing-xl: calc(var(--s) * 2);
	--spacing-xxl: calc(var(--s) * 3); /* No --- cannot bloody use 2xl since that could imply 2x of xl which this is not */
	--spacing-xxxl: calc(var(--s) * 5);
	--spacing-s: calc(var(--s) / 2);
	--spacing-xs: calc(var(--s) / 4);
	--spacing-xxs: calc(var(--s) / 5);
	
	--border-radius: .5rem;
	--border-radius-l: 1rem;
	
	/* font sizes  */
	--font-size-xs: 1.3rem;
	--font-size-s: 1.4rem;
	--font-size: 1.6rem;
	--font-size-m: 1.8rem; /* Keep this for now as a placeholder */
	--font-size-l: 2rem;
	--font-size-xl: 2.4rem;
	--font-size-xxl: 3.2rem;
	--font-size-xxxl: 4.2rem;
	
	/* container */
	--max-width: 960px;
	
	/* colors */
	/* -- default */
	--h: 15; /* rose */
	/* --h: 165; */ /* green-cyan */
	--h: 300; /* violet */
	
	--alt-offset: 20;
	--comp-offset: 220;
	--tert-offset: 100;
	
	--l-step: 10;
	--c-step: 10;
	
	--color-50: var(--violet-50);
	--color-100: var(--violet-100);
	--color-200: var(--violet-200);
	--color-300: var(--violet-300);
	--color-400: var(--violet-400);
	--color-500: var(--violet-500);
	--color-600: var(--violet-600);
	
	/* -- tailwind saturation mods */
	--c-0: var(--violet-50);
	--c-700: var(--violet-700);
	--c-800: var(--violet-800);
	--c-900: var(--violet-900);
	--c-950: var(--violet-950);

	--color-0: color-mix(in hsl, var(--c-0) 50%, #fff); /* inverse scale, 80 = 20% desaturate */
	--color-700: color-mix(in hsl, var(--c-700) 50%, #222);
	--color-800: color-mix(in hsl, var(--c-800) 50%, #222);
	--color-900: color-mix(in hsl, var(--c-900) 50%, #222);
	--color-950: color-mix(in hsl, var(--c-950) 50%, #222);
	--color-1000: color-mix(in hsl, var(--c-950) 30%, #111);
	
	/* colors */
	--color-bright-1: var(--color-500);
	--color-bright-2: var(--color-400);
	--color-bright-3: var(--color-300);
	--color-bright-4: var(--color-200);
	--color-bright-5: var(--color-100);
	--color-bright-6: var(--color-50);
	--color-bright-max: var(--color-0);
	
	--color-dark-1: var(--color-600);
	--color-dark-2: var(--color-700);
	--color-dark-3: var(--color-800);
	--color-dark-4: var(--color-900);
	--color-dark-5: var(--color-950);
	--color-dark-6: var(--color-1000);
	--color-dark-max: var(--color-1000);
	
	/* dims */
	--opacity-1: 0.7;
	--opacity-2: 0.5;
	--opacity-3: 0.3;
	--opacity-4: 0.1;
	--opacity-5: 0.07;
	--opacity-6: 0.04;
	
	--color-dim-1: rgba(0, 0, 0, var(--opacity-1));
	--color-dim-2: rgba(0, 0, 0, var(--opacity-2));
	--color-dim-3: rgba(0, 0, 0, var(--opacity-3));
	--color-dim-4: rgba(0, 0, 0, var(--opacity-4));
	--color-dim-5: rgba(0, 0, 0, var(--opacity-5));
	--color-dim-6: rgba(0, 0, 0, var(--opacity-6));
	
	/* ia: interactives */
	--ia-background: var(--color-800);
	--ia-foreground: var(--color-50);
	
	--ia-height: 5.4rem;
	--ia-padding: 2.8rem;

}



[data-theme="dark"] {

	/* inverse colors */		
	--color-bright-1: var(--color-600);
	--color-bright-2: var(--color-700);
	--color-bright-3: var(--color-800);
	--color-bright-4: var(--color-900);
	--color-bright-5: var(--color-950);
	--color-bright-6: var(--color-1000);
	--color-bright-max: var(--color-1000);

	--color-dark-1: var(--color-500);
	--color-dark-2: var(--color-400);
	--color-dark-3: var(--color-300);
	--color-dark-4: var(--color-200);
	--color-dark-5: var(--color-100);
	--color-dark-6: var(--color-0);
	--color-dark-max: var(--color-0);
	
	--color-dim-1: rgba(255,255,255,0.7);
	--color-dim-2: rgba(255,255,255,0.5);
	--color-dim-3: rgba(255,255,255,0.3);
	--color-dim-4: rgba(255,255,255,0.1);
	--color-dim-5: rgba(255,255,255,0.07);
	--color-dim-6: rgba(255,255,255,0.04);
}


html { font-size: 62.5%; }
body, html { min-height: 100%; overflow-x: hidden; }
body {
	color: var(--color-dark-6);
	font-family: 'InterVariable', sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1, 'zero' 0, 'salt' 0; /* fix for Chrome */
	font-size: var(--font-size);
	overflow-x: hidden;
}

/* slashed zero on inputs and in tables */
.slashed_zero, table, input, select {
	font-feature-settings: 'liga' 1, 'calt' 1, 'zero' 1, 'salt' 0; /* fix for Chrome */
}

.container {
	max-width: var(--max-width);
	padding: 0 var(--spacing-xxl);
	margin: 30px auto;
}






/*----------------------------------------

	# Typography	
	
----------------------------------------*/

h1 {
	margin: 0 0 var(--spacing);
	font-size: var(--font-size-xxxl);
	font-weight: 700;
}

h2 {
	font-size: var(--font-size-xxl);
	margin: 0 0 var(--spacing);
}

h3 {
	font-weight: 400;
	margin: 0 0 var(--spacing);
	display: block;
	font-size: var(--font-size-xl);
}

h4 {
	font-weight: 400;
	margin: 0 0 var(--spacing-s);
	font-size: var(--font-size-l);
}

h5 {
	font-size: var(--font-size);
	font-weight: 700;
	margin: 0 0 var(--spacing-s);
}


p { line-height: 1.45; margin-bottom: var(--spacing); }
p:last-of-type { margin-bottom: 0; }

a {
	text-underline-offset: var(--spacing-xs);
	color: var(--blue-600);
}

hgroup {
	margin: 0 0 var(--spacing-l);
	* { margin: 0; }
	.lead { margin-top: var(--spacing-s); }
}

.lead {
	font-size: var(--font-size-l);
	opacity: 0.7; margin-bottom: var(--spacing-s);
	margin-top: var(--spacing-xs);
}

sub { font-size: var(--font-size-xs) !important; }

ul, ol {
	list-style-position: inside;
	li { margin: 0 0 var(--spacing-xs); &:last-of-type { margin-bottom: 0; }}
}




/*----------------------------------------

	# Grid	

----------------------------------------*/

.grid {
	--grid-columns: 5; /* max -- after this it becomes another row */
	--grid-min-width: 250px;
	--grid-gap: var(--spacing);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min-width), 100% / calc(var(--grid-columns) + 1))), 1fr));
	gap: var(--grid-gap);
}

.grid[data-columns] {

	/* define */
	&[data-columns="1"]{ --grid-columns: 1; }
	&[data-columns="2"]{ --grid-columns: 2; }
	&[data-columns="3"]{ --grid-columns: 3; }
	&[data-columns="4"]{ --grid-columns: 4; }
	&[data-columns="5"]{ --grid-columns: 5; }
	&[data-columns="6"]{ --grid-columns: 6; }

	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min-width), 100% / calc(var(--grid-columns) + 1))), 1fr));
}




/*----------------------------------------

	# Small + Helpers
	
----------------------------------------*/



i { font-style: normal; }

/* -- ruler spacers */
hr { height: 1px; border: none; margin: var(--spacing-xl) 0; border-bottom: thin solid currentColor;  opacity: 0.2; }
hr.large { margin: var(--spacing-xxl) 0; }
hr.transparent { opacity: 0; }

.flex-list {
	display: flex;
	gap: var(--spacing-s);
	flex-wrap: wrap;
	max-width: 100%;
	&.vertical {
		flex-direction: column;
	}
}

/* spacers */
.mt { margin-top: var(--spacing) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: var(--spacing-s) !important; }
.mt-l { margin-top: var(--spacing-l) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-xxl { margin-top: var(--spacing-xxl) !important; }
.mb { margin-bottom: var(--spacing) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-s { margin-bottom: var(--spacing-s) !important; }
.mb-l { margin-bottom: var(--spacing-l) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-xxl { margin-bottom: var(--spacing-xxl) !important; }

/* overflows */
.overflow-x-auto { max-width: 100%; overflow-x: auto; }
.overflow-y-auto { max-width: 100%; overflow-y: auto; }

/* dims */
.color-dim-1 { color: var(--color-dim-1); }
.color-dim-2 { color: var(--color-dim-2); }
.color-dim-3 { color: var(--color-dim-3); }
.color-dim-4 { color: var(--color-dim-4); }
.color-dim-5 { color: var(--color-dim-5); }
.color-dim-6 { color: var(--color-dim-6); }

/* opacity, general */
.opacity-1 { opacity: var(--opacity-1); }
.opacity-2 { opacity: var(--opacity-2); }
.opacity-3 { opacity: var(--opacity-3); }
.opacity-4 { opacity: var(--opacity-4); }
.opacity-5 { opacity: var(--opacity-5); }
.opacity-6 { opacity: var(--opacity-6); }


/* 	text, general */
.capitalize { text-transform: capitalize; }

/* states */
.hidden { display: none !important; }



/*----------------------------------------

	# STUFF
	-
	Our actual stuff that isn't
	pure CSS "FW" boilerplating
	
----------------------------------------*/

html {
	 background: linear-gradient(to bottom, var(--color-bright-5), var(--color-bright-4) );
		margin-bottom: 0; padding-bottom: 0;
		body { padding-bottom: 0; }
}

body, html{ height: 100%; }

body {
	display: flex;
	flex-direction: column;
}

#left_nav {
	--hotzone-size: 5rem;
	position: fixed; top: 0; left: 0;
	height: 100%;
	background: var(--color-dark-max);
	padding: var(--spacing-l);
	color: var(--color-bright-4);
	max-width: 300px;
	
	/* fx */
	transform: translateX(-100%);
	transition: all .2s ease;
	transition-delay: .05s;
	
	&:hover,
	&.on { transform: none; }
	
	&::after {
		content: '';
		position: absolute;
		top: 0;
		height: 100%;
		width: var(--hotzone-size);
		right: calc(var(--hotzone-size) * -1);
	}
}



code {
	margin: 0 0 var(--spacing);
	label {
		font-size: var(--font-size-s);
		font-weight: 700;
		display: inline-block;
		margin: 0 0 var(--spacing);
	}
	script {
		margin: 0 0 var(--spacing);
		padding: var(--spacing-l);
		background: var(--color-bright-4);
		border-radius: var(--border-radius);
	}
	
}