/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Import - - - - - - - - - - - - - - - - - - - - - - - - -  */
@import url("reset.css");
@import url("utility.css");
@import url("../jakarta/jakarta.css");
@import url("type-scale.css");
@import url("layout.css");
@import url("UI.css");
@import url("bling2.css");


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

body{
	font-family: "Jakarata";
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Text geometry - - - - - - - - - - - - - - - - - - - - - - */

h1, h2, h3, h4, h5, h6, p, li, blockquote {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

p {
	margin-block-end: 1em;
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - FONT SIZE - - - - - - - - - - - - - - - - - - - - - - - - */
footer { 
	font-size: var(--size-3); 
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - FONT WEIGHT - - - - - - - - - - - - - - - - - - - - - - */

body, p { font-weight: 400; } /* 300 if not variable. */

h1.plusPlus { font-weight: 100; }
h1.plus { font-weight: 200; }
h1 { font-weight: 300; }
h2 { font-weight: 400; }
h3, h4, h5 { font-weight: 600; }
h6 { font-weight: 700; }

b, strong { font-weight: 600; }

small, .xsmall { font-weight: 400; }
.xxsmall, .xxxsmall { font-weight: 450; }




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - FONT STYLE - - - - - - - - - - - - - - - - - - - - - - */
i, em { font-style: italic; }




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - LETTER SPACING  - - - - - - - - - - - - - - - - - - - - */

h1, h2 { letter-spacing: -0.020em; }
h5, h6, .small, .xsmall { letter-spacing: 0.015em; }
.xxsmall, .xxxsmall { letter-spacing: 0.030em; }




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - LINE HEIGHT - - - - - - - - - - - - - - - - - - - - - - */

body, p { line-height: 1.4; }
h1, h2, h3 { line-height: 1.2; }








/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Color - - - - - - - - - - - - - - - - - - - - - - - - - - */

:root{
	--rose: #FFA0F0;
	--turqoise: #32EED2;
	--bleu: #11A0D7;
	--jaune: #FFF6A0;

	--mainColor: var(--bleu);
	--accentColor: var(--rose);
}

/* h1, h2, h3, h4, h5, h6 { color: var(--mainColor); } */
header h3 { color: unset; }


li::marker {
	/* color: hsl( from var(--accentColor) h s l ); */
}

footer { 
	color: hsl(from currentColor h s l / 0.2)
}

hr { 
	border: none;
	border-top: 1px solid hsl(from currentColor h s l / 0.5);
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Nav - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* nav#TOC a:target-current, */
nav#TOC ul {
	margin-block-end: 1.5em;
}
nav#TOC li {
	line-height: 1.2;
	margin-block-end: 0.5em;
	padding: 0.25em;
}
nav#TOC a { 
	text-decoration: none; 
	color: inherit; 
	font-weight: 300;
}
nav#TOC li:has(a.active){
	border-left: 1px solid hsl( from var(--blingColor) h s 70%);
	color: hsl( from var(--blingColor) h s 40%);
	/* background: linear-gradient(
		90deg, 
		hsl(from var(--mainColor) h s l / 0.05), 
		hsl(from var(--mainColor) h s l / 0.00) 67%	
	); */
}
nav#TOC a.active {
	/* font-weight: 400; */
}

nav .logo{ max-width: 8rem; }





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Elements  - - - - - - - - - - - - - - - - - - - - - - - - */

a { 
	color: var(--mainColor); 
	text-decoration-thickness: 1px;
	text-underline-offset: 0.125em;
}
a:hover {
	background: hsl(from currentColor h s l / 0.1);
}

a[href^="http"]:before{
	content: " → "
}

ol, ul { padding:0; }


ol, ul {
	padding-left: 1em;
}

li::marker {
	font-weight: 500;
}

ol ul { list-style-type: disc; }

ol ul ul { list-style-type: circle; }




dl { /*  display: flex; gap: 1rem; width: max-content; */ }

dt, dd { float: left; display: inline-block; }

dt { font-weight: 300;  clear: both; }
dt:after { content: ":"};

dd { font-weight: 500; }
dd:before { content: "\2002"; }

dt,               dd               { border-bottom: 1px solid hsl(from currentColor h s l / 0.2); }
dt:first-of-type, dd:first-of-type {    border-top: 1px solid hsl(from currentColor h s l / 0.2); }

















/* TEMP */
.temp{
	color: #F1357A;
}