/* tint, tone, shade */

:root {
	--red\-:      color-mix(in oklch, var(--magenta), var(--red) calc(100%/12*11));
	--red:        color(display-p3 0.867 0 0);
	--red\+:      color-mix(in oklch, var(--red), var(--yellow) calc(100%/12*1));
	--scarlet\-:  color-mix(in oklch, var(--red), var(--yellow) calc(100%/12*2));
	--scarlet:    color-mix(in oklch, var(--red), var(--yellow) 25%);
	--scarlet\+:  color-mix(in oklch, var(--red), var(--yellow) calc(100%/12*4));
	--orange\-:   color-mix(in oklch, var(--red), var(--yellow) calc(100%/12*5));
	--orange:     color-mix(in oklch, var(--red), var(--yellow));
	--orange\+:   color-mix(in oklch, var(--red), var(--yellow) calc(100%/12*7));
	--amber\-:    color-mix(in oklch, var(--red), var(--yellow) calc(100%/12*8));
	--amber:      color-mix(in oklch, var(--red), var(--yellow) 75%);
	--amber\+:    color-mix(in oklch, var(--red), var(--yellow) calc(100%/12*10));
	--yellow\-:   color-mix(in oklch, var(--red), var(--yellow) calc(100%/12*11));
	--yellow:     color(display-p3 1 1 0);
	--yellow\+:   color-mix(in oklch, var(--yellow), var(--green) calc(100%/12*1));
	--lemon\-:    color-mix(in oklch, var(--yellow), var(--green) calc(100%/12*2));
	--lemon:      color-mix(in oklch, var(--yellow), var(--green) 25%);
	--lemon\+:    color-mix(in oklch, var(--yellow), var(--green) calc(100%/12*4));
	--apple\-:    color-mix(in oklch, var(--yellow), var(--green) calc(100%/12*5));
	--apple:      color-mix(in oklch, var(--yellow), var(--green));
	--apple\+:    color-mix(in oklch, var(--yellow), var(--green) calc(100%/12*7));
	--lime\-:     color-mix(in oklch, var(--yellow), var(--green) calc(100%/12*8));
	--lime:       color-mix(in oklch, var(--yellow), var(--green) 75%);
	--lime\+:     color-mix(in oklch, var(--yellow), var(--green) calc(100%/12*10));
	--green\-:    color-mix(in oklch, var(--yellow), var(--green) calc(100%/12*11));
	--green:      color(display-p3 0 0.526 0);
	--green\+:    color-mix(in oklch, var(--green), var(--cyan) calc(100%/12*1));
	--mint\-:     color-mix(in oklch, var(--green), var(--cyan) calc(100%/12*2));
	--mint:       color-mix(in oklch, var(--green), var(--cyan) 25%);
	--mint\+:     color-mix(in oklch, var(--green), var(--cyan) calc(100%/12*4));
	--viridian\-: color-mix(in oklch, var(--green), var(--cyan) calc(100%/12*5));
	--viridian:   color-mix(in oklch, var(--green), var(--cyan));
	--viridian\+: color-mix(in oklch, var(--green), var(--cyan) calc(100%/12*7));
	--seafoam\-:  color-mix(in oklch, var(--green), var(--cyan) calc(100%/12*8));
	--seafoam:    color-mix(in oklch, var(--green), var(--cyan) 75%);
	--seafoam\+:  color-mix(in oklch, var(--green), var(--cyan) calc(100%/12*10));
	--cyan\-:     color-mix(in oklch, var(--green), var(--cyan) calc(100%/12*11));
	--cyan:       color(display-p3 0 1 1);
	--cyan\+:     color-mix(in oklch, var(--cyan), var(--blue) calc(100%/12*1));
	--sky\-:      color-mix(in oklch, var(--cyan), var(--blue) calc(100%/12*2));
	--sky:        color-mix(in oklch, var(--cyan), var(--blue) 25%);
	--sky\+:      color-mix(in oklch, var(--cyan), var(--blue) calc(100%/12*4));
	--azure\-:    color-mix(in oklch, var(--cyan), var(--blue) calc(100%/12*5));
	--azure:      color-mix(in oklch, var(--cyan), var(--blue));
	--azure\+:    color-mix(in oklch, var(--cyan), var(--blue) calc(100%/12*7));
	--cerulean\-: color-mix(in oklch, var(--cyan), var(--blue) calc(100%/12*8));
	--cerulean:   color-mix(in oklch, var(--cyan), var(--blue) 75%);
	--cerulean\+: color-mix(in oklch, var(--cyan), var(--blue) calc(100%/12*10));
	--blue\-:     color-mix(in oklch, var(--cyan), var(--blue) calc(100%/12*11));
	--blue:       color(display-p3 0 0 0.645);
	--blue\+:     color-mix(in oklch, var(--blue), var(--magenta) calc(100%/12*1));
	--indigo\-:   color-mix(in oklch, var(--blue), var(--magenta) calc(100%/12*2));
	--indigo:     color-mix(in oklch, var(--blue), var(--magenta) 25%);
	--indigo\+:   color-mix(in oklch, var(--blue), var(--magenta) calc(100%/12*4));
	--purple\-:   color-mix(in oklch, var(--blue), var(--magenta) calc(100%/12*5));
	--purple:     color-mix(in oklch, var(--blue), var(--magenta));
	--purple\+:   color-mix(in oklch, var(--blue), var(--magenta) calc(100%/12*7));
	--violet\-:   color-mix(in oklch, var(--blue), var(--magenta) calc(100%/12*8));
	--violet:     color-mix(in oklch, var(--blue), var(--magenta) 75%);
	--violet\+:   color-mix(in oklch, var(--blue), var(--magenta) calc(100%/12*10));
	--magenta\-:  color-mix(in oklch, var(--blue), var(--magenta) calc(100%/12*11));
	--magenta:    color(display-p3 1 0 1);
	--magenta\+:  color-mix(in oklch, var(--magenta), var(--red) calc(100%/12*1));
	--pink\-:     color-mix(in oklch, var(--magenta), var(--red) calc(100%/12*2));
	--pink:       color-mix(in oklch, var(--magenta), var(--red) 25%);
	--pink\+:     color-mix(in oklch, var(--magenta), var(--red) calc(100%/12*4));
	--rose\-:     color-mix(in oklch, var(--magenta), var(--red) calc(100%/12*5));
	--rose:       color-mix(in oklch, var(--magenta), var(--red));
	--rose\+:     color-mix(in oklch, var(--magenta), var(--red) calc(100%/12*7));
	--crimson\-:  color-mix(in oklch, var(--magenta), var(--red) calc(100%/12*8));
	--crimson:    color-mix(in oklch, var(--magenta), var(--red) 75%);
	--crimson\+:  color-mix(in oklch, var(--magenta), var(--red) calc(100%/12*10));
}

@font-face { font-family: code; src: url("/.fonts/code.woff2"); }

@font-face { font-family: note; src: url("/.fonts/note.woff2"); }

@font-face { font-family: text; font-style: normal; font-weight: 300; src: url("/.fonts/300.woff2");  }
@font-face { font-family: text; font-style: normal; font-weight: 400; src: url("/.fonts/400.woff2");  }
@font-face { font-family: text; font-style: italic; font-weight: 400; src: url("/.fonts/400i.woff2"); }
@font-face { font-family: text; font-style: normal; font-weight: 500; src: url("/.fonts/500.woff2");  }
@font-face { font-family: text; font-style: italic; font-weight: 500; src: url("/.fonts/500i.woff2"); }
@font-face { font-family: text; font-style: normal; font-weight: 700; src: url("/.fonts/700.woff2");  }
@font-face { font-family: text; font-style: normal; font-weight: 800; src: url("/.fonts/800.woff2");  }
@font-face { font-family: text; font-style: normal; font-weight: 900; src: url("/.fonts/900.woff2");  }

:root {	
	background:   light-dark(white, #111);
	color:        light-dark(black, #DDD);
	color-scheme: light dark;
	font:         400 16px/1.5 text, sans-serif;
	font-size:    clamp(1rem, 2vw, 1.5rem);
}

::selection {
	background: light-dark(
		hsl(from var(--apple) h s 33%),
		hsl(from var(--apple) h s 17%));
}

a {
	color:           inherit;
	font-weight:     500;
	text-decoration: underline;

	&:hover, &:hover strong {
		background: light-dark(black, #DDD);
		color:      light-dark(white, #111) !important;
		padding: 0  0.25rem;
		margin:  0 -0.25rem;
		text-decoration: none;
	}
}

article, header, footer {
	margin:    0 auto;
	max-width: 26rem;
	padding:   0 1rem;
}

article {
	position: relative;
	*:first-child { margin-top: 0; }
	*:last-child  {
		margin-bottom: 7rem;
		@media (max-width: 45rem) { margin-bottom: 3rem; }
	}
}

aside {
	@media (max-width: 46rem) { display: none; }

	color: light-dark(
		var(--blue\+),
		color-mix(in oklch, var(--purple), white 67%));
	font-family:  note;
	font-size:   .875rem;
	font-weight:  bold;
	line-height:  1rem;
	position:     absolute;
	width:        7.5rem;

	&.left {
		margin-left: -9.5rem;
		text-align:   right;
		transform:    rotate(-1deg);
	}

	&.right {
		margin-right: -8.5rem;
		right:         0;
		transform:     rotate(1deg);
	}
	
	a { font-weight: bold; }
}

body { margin: 0; }

code {
	background: light-dark(
		hsl(from var(--green\+) h s l / .1),
		hsl(from var(--green\+) h s l / .2));
	font-family: code, monospace;
	line-height: 1rem;
	padding:    .25rem .125rem 0 .125rem;
}

h1, h2, h3 { font-size: 1rem; }

h1 {
	color:       light-dark(black, white);
	font-weight: 800;
	margin:      2rem 0 1rem 0;
	text-transform: uppercase;
}

h2 {
	color: light-dark(
		color-mix(in oklch, var(--red), black 10%),
		white);
	font-weight: 700;
	margin:      2rem 0 .5rem 0;
}

h3 {
	font-weight:  700;
	font-variant: all-small-caps;
	margin:       1rem 0 .5rem 0;
}

header {
	font-size: 0;
	padding:   3rem 1rem;

	a {
		color: light-dark(
			hsl(from black h s 75%),
			hsl(from #DDD  h s 25%));
		font-size:      1rem;
		font-weight:    500;
		margin-right:   1rem;
		text-transform: lowercase;

		&:hover { margin-right: .75rem; }
	}

	a[href="mailto:email@weshipsoftware.com"] {
		color: light-dark(var(--cerulean), var(--sky));
	}
}

hr {
	background: light-dark(#EEE, #222);
	border:     none;
	height:    .25rem;
	margin:     2rem 0;
}

iframe, img, video {
	aspect-ratio: 16 / 9;
	border:       none;
	box-shadow:   0 0 .25rem light-dark(black, #111);
	margin:       0 0 .5rem -1rem;
	object-fit:   cover;
	width:        calc(100% + 2rem);
}

mark {
	background:  light-dark(var(--yellow\-), var(--amber\+));
	font-weight: 500;
	padding:     0 .125rem;
	margin:      0 -.125rem;
}

menu {	
	list-style-type: none;
	margin:          0;
	padding:         0;
	position:        relative;

	li {
		position: absolute;
		right:    1rem;

		a {
			text-decoration: none;
			&:hover { background: none; }
			
		}

		&:hover {
			cursor: pointer;

			&:before {
				font-variant: all-small-caps;
				font-weight:  500;
				padding:      0 .5rem;
				content: attr(data-attr);
			}
		}
	}

	li:nth-child(1) { top: 1rem; }
	li:nth-child(2) { display: none; }
	li:nth-child(3) { top: 3rem; }
	li:nth-child(4) { top: 5rem; }
}

p {
	margin: 0 0 .5rem 0;
	
	code { margin: 0 -.125rem; }
	
	strong { font-weight: 700; }
}

pre {
	/* background-color: black; */
	/* color: white; */
	margin: 0 0 .5rem -1rem;
	overflow-x: scroll;
	padding: 1rem;
	width: 100%;

	code {
		font-size: .75rem;
		font-weight: 300;
		letter-spacing: -.025rem;

		&.language-shell {
			background-color: inherit;
			/* color: silver; */
			display: block;
			margin: 0;
			padding: 0;
			
			&::first-line {
				/* color:       white; */
				font-weight: 500;
			}
		}
	}
}

strong { font-weight: 500; }

table {
	width: 100%;
}

hr + ul, body#readme ul {
	font-weight: 500;
	margin:      0 0 .5rem 0;
	padding:     0;

	li {
		margin-bottom: 0.5rem;
		&::marker { color: #DDD; }
	}
}