/* Vibranium v0.1.1 */
/**
 * CONTENTS
 *
 * EXTERNAL IMPORTS
 * 
 * RESET
 * 
 * DEFAULT THEME
 * 
 * CUSTOM PROPERTIES
 * Aspect Ratio.............Common aspect ratios values (currently unused)
 * Spacings.................Cohesive values for the margins & paddings out there
 * Borders..................Cohesive border widths values
 * Border Radiuses..........Cohesive border radiuses and other useful settings
 * Font Families............Smart font families defaults
 * Font Sizes...............Text sizes that should go well together
 * Durations................Cohesive durations values (currently unused)
 * Z-index..................Useful for setting display order
 * 
 * CLASSLIGHT DECLARATIONS
 * Accessibility............Generic accessibility rules
 * Layout...................Page basic layout rules
 * Headings.................Headings styles
 * Paragraphs...............Paragraph styles
 * Clickables...............Links and buttons styles
 * Aside....................Rules for styling floating aside blocks
 * Quotes...................Rules for block and inline quotes tags
 * Lists....................Rules for unordered, ordered and definition lists
 * Inline text elements.....Adding style to uncommon inline elements
 * Preformatted blocks......Rules for code blocks, input, outputs, etc. 
 * Images...................Style rules for images and related tags 
 * Tables...................Rules for styling tables 
 * Forms....................Rules for styling form elements including notices
 * Accordions...............Rules for single details and accordions
 * 
 * CLASS COMPONENTS
 * Name.....................>Put a description here<
 *
 */





/*------------------------------------*\
  #EXTERNAL-IMPORTS
\*------------------------------------*/

@import url('https://fonts.bunny.net/css2?family=Cookie&family=Crimson+Text:wght@600&family=Inter&family=Fira+Code:wght@300..700&family=Wavefont&display=swap');





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

@layer reset, generic, theme, special;

@layer reset {
	*, *::before, *::after
	{
		box-sizing: border-box;
		flex: 1 0 auto;
	}

	*
	{
		margin: 0;
		padding: 0;
	}

	html,
	body
	{
		height: 100%;
	}

	body
	{
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
	}

	img,
	picture,
	video,
	canvas,
	svg
	{
		max-inline-size: 100%;
		max-block-size: 100%;

		display: block;
	}

	img,
	fieldset
	{
		border: none;
	}

	table,
	input,
	button,
	textarea,
	select
	{
		font: inherit;
	}

	hr
	{
		display: none;
	}

	p,
	h1, h2, h3, h4, h5, h6
	{
		line-height: calc(1em + 0.5rem);
		overflow-wrap: break-word;
		hyphens: auto;
	}
}





/*------------------------------------*\
  #DEFAULT-THEME
\*------------------------------------*/

@layer theme {
	:root {
		/* Color wheel */
		/* Color palette */
		--color-primary: #1A0554;
		--color-secondary: #758BFD;
		--color-success: #51F57A;
		--color-danger: #F55154;
		--color-warning: #FDD408;
		--color-info: #08B2E3;
		--color-accent: #6B45DE;
		--color-error: #BD142B;
		--color-light: #F6F6F7;
		--color-muted: #C4A8FF;
		--color-dark: #0C0B13;

		/* Font attributes */
		--font-family-display: 'Cookie', cursive;
		--font-family-mono: 'Fira Code', monospace;
		--font-family-serif: 'Crimson Text', serif;
		--font-family-sans: 'Inter', sans-serif;
		--font-family-wave: 'Wavefont', cursive;

		/* Font sizes */
		/* Text shadows */
		--text-shadow-base: 0 2px 4px hsl(0 0% 0% / 0.15);
		--text-shadow-strong: 0 4px 8px hsl(0 0% 0% / 0.2);
		--text-shadow-stronger: var(--text-shadow-strong);
		--text-shadow-subtle: 0 1px 2px hsl(0 0% 0% / 0.1);
		--text-shadow-subtler: var(--text-shadow-subtle);

		/* Box shadows */
		--box-shadow-base: 0 4px 6px hsl(0 0% 0% / 0.1);
		--box-shadow-strong: var(--box-shadow-base);
		--box-shadow-stronger: var(--box-shadow-base);
		--box-shadow-subtle: 0 1px 3px hsl(0 0% 0% / 0.1);
		--box-shadow-subtler: var(--box-shadow-subtle);
		/* Box heights */
		/* Spacings */
		/* Border radiuses */		


	}
}





/*------------------------------------*\
  #CUSTOM PROPERTIES
\*------------------------------------*/

@layer generic {

	:root {
		
		/*= Aspect Ratio =*/

		--ratio-square: 1 / 1;
		--ratio-video-h: 16 / 9;
		--ratio-video-v: 9 / 16;
		--ratio-pan: 21 / 9;
		


		/*= Box Heights =*/
		/*= Box Widths =*/
		/*= Box Shadows =*/

		/*= Spacings =*/
	
		--spacing-base: 1rem;
		--spacing-dynamic: clamp(0.8rem, 1.25vmin + 1.25vmax, 1.25rem);

		--spacing-2xs: calc(var(--spacing-base) * 0.125);
		--spacing-xs: calc(var(--spacing-base) * 0.25);
		--spacing-sm: calc(var(--spacing-base) * 0.5);
		--spacing-md: var(--spacing-base);
		--spacing-lg: calc(var(--spacing-base) * 2);
		--spacing-xl: calc(var(--spacing-base) * 4);
		--spacing-2xl: calc(var(--spacing-base) * 8);

		--spacing-2dxs: calc(var(--spacing-dynamic) * 0.125);
		--spacing-dxs: calc(var(--spacing-dynamic) * 0.25);
		--spacing-dsm: calc(var(--spacing-dynamic) * 0.5);
		--spacing-dmd: var(--spacing-dynamic);
		--spacing-dlg: calc(var(--spacing-dynamic) * 2);
		--spacing-dxl: calc(var(--spacing-dynamic) * 4);
		--spacing-2dxl: calc(var(--spacing-dynamic) * 8);



		/*= Borders =*/

		--border-base: .8vmin;

		--border-min: 1px;
		--border-2xs: calc(var(--border-base) * 0.5);
		--border-xs: calc(var(--border-base) * 0.625);
		--border-sm: calc(var(--border-base) * 0.8);
		--border-md: var(--border-base);
		--border-lg: calc(var(--border-base) * 1.25);
		--border-xl: calc(var(--border-base) * 1.6);
		--border-2xl: calc(var(--border-base) * 2);



		/*= Border Radiuses =*/

		--border-radius-base: 0.5rem;

		--border-radius-2xs: calc(var(--border-radius-base) * 0.25);
		--border-radius-xs: calc(var(--border-radius-base) * 0.33);
		--border-radius-sm: calc(var(--border-radius-base) * 0.5);
		--border-radius-md: var(--border-radius-base);
		--border-radius-lg: calc(var(--border-radius-base) * 2);
		--border-radius-xl: calc(var(--border-radius-base) * 3);
		--border-radius-2xl: calc(var(--border-radius-base) * 4);

		--border-radius-nil: 0;
		--border-radius-pill: 100vmax;
		--border-radius-full: 50%;



		/*= Font Families =*/

		--font-family-base: var(--font-family-sans, sans-serif);
		--font-family-accent: var(--font-family-display, cursive);
		--font-family-title: var(--font-family-serif, serif);
		--font-family-code: var(--font-family-mono, monospace);



		/*= Font Sizes =*/

		--font-size-base: 1rem;
		--font-size-dynamic: clamp(0.8rem, 0.75rem + 0.5vw + 0.125vmax, 1.25rem);

		--font-size-xs:  calc(var(--font-size-base) * 0.694);
		--font-size-sm:  calc(var(--font-size-base) * 0.833);/*1.2 - Minor third*/
		--font-size-md:  var(--font-size-base);
		--font-size-lg:  calc(var(--font-size-base) * 1.25);/*1.25 - Major third*/
		--font-size-xl:  calc(var(--font-size-base) * 1.5625);
		--font-size-2xl: calc(var(--font-size-base) * 2);
		--font-size-3xl: calc(var(--font-size-base) * 2.5);
		--font-size-4xl: calc(var(--font-size-base) * 3.125);

		--font-size-dxs:  calc(var(--font-size-dynamic) * 0.694);
		--font-size-dsm:  calc(var(--font-size-dynamic) * 0.833);
		--font-size-dmd:  var(--font-size-dynamic);
		--font-size-dlg:  calc(var(--font-size-dynamic) * 1.25);
		--font-size-dxl:  calc(var(--font-size-dynamic) * 1.5625);
		--font-size-2dxl: calc(var(--font-size-dynamic) * 2);
		--font-size-3dxl: calc(var(--font-size-dynamic) * 2.5);
		--font-size-4dxl: calc(var(--font-size-dynamic) * 3.125);



		/*= Text Shadows =*/
		/*= Durations =*/
		--duration-base: .2s;
		--duration-quick: calc(var(--duration-base) * 0.5);
		--duration-quicker: calc(var(--duration-base) * 0.25);
		--duration-slow: calc(var(--duration-base) * 2);
		--duration-slower: calc(var(--duration-base) * 4);



		/*= Z-index =*/
		--z-index-last: -999999;
		--z-index-lower: 0;
		--z-index-low: 0;
		--z-index-base: 0;
		--z-index-up: 0;
		--z-index-upper: 0;
		--z-index-first: 999999;



		/*= BASIC RULES =*/

		color: var(--color-dark);
		background-color: var(--color-light);
		font-family: var(--font-family-base);
	}

	@media screen and (orientation: portrait) {

	}

	@media screen and (orientation: landscape) {

	}

	/*
		BREAKPOINTS VALUES
		------------------
		xs:  <40em
		sm:   40em (~640px)
		md:   48em (~768px)
		lg:   64em (~1024px)
		xl:   80em (~1280px)
		2xl:  96em (~1536px)
		3xl: 120em (~1920px)
	*/

	@media screen and (max-width: 40em) {
		:root {

			--font-size-dynamic: clamp(0.875rem, 0.5rem + 1vw + 0.25vmax, 1rem);

			--font-size-xs:  calc(var(--font-size-base) * 0.878);
			--font-size-sm:  calc(var(--font-size-base) * 0.937);/*1.067 - Minor second*/
			--font-size-lg:  calc(var(--font-size-base) * 1.125);/*1.125 - Major second*/
			--font-size-xl:  calc(var(--font-size-base) * 1.265625);
			--font-size-2xl: calc(var(--font-size-base) * 1.424);
			--font-size-3xl: calc(var(--font-size-base) * 1.6);
			--font-size-4xl: calc(var(--font-size-base) * 1.8);

			--font-size-dxs:  calc(var(--font-size-dynamic) * 0.878);
			--font-size-dsm:  calc(var(--font-size-dynamic) * 0.937);
			--font-size-dlg:  calc(var(--font-size-dynamic) * 1.125);
			--font-size-dxl:  calc(var(--font-size-dynamic) * 1.265625);
			--font-size-2dxl: calc(var(--font-size-dynamic) * 1.424);
			--font-size-3dxl: calc(var(--font-size-dynamic) * 1.6);
			--font-size-4dxl: calc(var(--font-size-dynamic) * 1.8);
		}
	}

	@media screen and (min-width: 40em) {

	}

	@media screen and (min-width: 48em) {

	}

	@media screen and (min-width: 64em) {

	}

	@media screen and (min-width: 80em) {
		:root {

			--font-size-base: 1.375rem;
			--font-size-dynamic: clamp(1.25rem, 1.25vw + 0.3125vmax, 1.5rem);

			--font-size-xs:  calc(var(--font-size-base) * 0.64);
			--font-size-sm:  calc(var(--font-size-base) * 0.8);/*1.25 - Major third*/
			--font-size-lg:  calc(var(--font-size-base) * 1.25);/*1.25 - Major third*/
			--font-size-xl:  calc(var(--font-size-base) * 1.5625);
			--font-size-2xl: calc(var(--font-size-base) * 2);
			--font-size-3xl: calc(var(--font-size-base) * 2.666);/*1.33 - Perfect fourth*/
			--font-size-4xl: calc(var(--font-size-base) * 3.555);

			--font-size-dxs:  calc(var(--font-size-dynamic) * 0.64);
			--font-size-dsm:  calc(var(--font-size-dynamic) * 0.8);
			--font-size-dlg:  calc(var(--font-size-dynamic) * 1.25);
			--font-size-dxl:  calc(var(--font-size-dynamic) * 1.5625);
			--font-size-2dxl: calc(var(--font-size-dynamic) * 2);
			--font-size-3dxl: calc(var(--font-size-dynamic) * 2.666);
			--font-size-4dxl: calc(var(--font-size-dynamic) * 3.555);
		}
	}

	@media screen and (min-width: 96em) {
		:root {

			--font-size-base: 1.6825rem;
			--font-size-dynamic: clamp(1.5rem, 1.25vw + 0.3125vmax, 1.875rem);

			--font-size-lg:  calc(var(--font-size-base) * 1.333);/*1.33 - Perfect fourth*/
			--font-size-xl:  calc(var(--font-size-base) * 1.777);
			--font-size-2xl: calc(var(--font-size-base) * 2.369);
			--font-size-3xl: calc(var(--font-size-base) * 3.157);
			--font-size-4xl: calc(var(--font-size-base) * 4.209);

			--font-size-dlg:  calc(var(--font-size-dynamic) * 1.333);
			--font-size-dxl:  calc(var(--font-size-dynamic) * 1.777);
			--font-size-2dxl: calc(var(--font-size-dynamic) * 2.369);
			--font-size-3dxl: calc(var(--font-size-dynamic) * 3.157);
			--font-size-4dxl: calc(var(--font-size-dynamic) * 4.209);
		}
	}

	@media screen and (min-width: 120em) {
		:root {

			--font-size-base: 3rem;
			--font-size-dynamic: clamp(1.875rem, -0.25rem + 1.41664vw + 0.35416vmax, 4rem);

			--font-size-xs:  calc(var(--font-size-base) * 0.563);
			--font-size-sm:  calc(var(--font-size-base) * 0.75);/*1.33 - Perfect fourth*/
			--font-size-2xl: calc(var(--font-size-base) * 2.369);/*1.33 - Perfect fourth*/
			--font-size-3xl: calc(var(--font-size-base) * 3.555);/*1.5 - Perfect fifth*/
			--font-size-4xl: calc(var(--font-size-base) * 5.75);/*1.618 - Golden ratio*/

			--font-size-dxs:  calc(var(--font-size-dynamic) * 0.563);
			--font-size-dsm:  calc(var(--font-size-dynamic) * 0.75);
			--font-size-2dxl: calc(var(--font-size-dynamic) * 2.369);
			--font-size-3dxl: calc(var(--font-size-dynamic) * 3.555);
			--font-size-4dxl: calc(var(--font-size-dynamic) * 5.75);
		}
	}

	@media screen and (prefers-reduced-motion: no-preference) {
		:root {
			scroll-behavior: smooth;
		}
	}

	@media screen and (prefers-reduced-motion: reduce) {

	}

	@media screen and (prefers-color-scheme: dark) {
		:root {
			color: var(--color-light);
			background-color: var(--color-dark);
		}
	}

	@media screen and (display-mode: fullscreen) {

	}

	@media screen and (display-mode: standalone) {

	}

	@media screen and (display-mode: minimal-ui) {

	}





/*------------------------------------*\
  #CLASSLIGHT-DECLARATIONS
\*------------------------------------*/

	/*= Accessibility =*/

	:focus-visible {
		outline: .125rem solid var(--color-secondary);
		outline-offset: .125rem;
	}



	/*= Layout =*/

	body > :is(div, header, footer, nav, section, main, article, figure, h1, h2, h3, h4, h5, h6):not(._full)
	{
		@media screen and (max-width: 40em) {
			margin-inline: var(--spacing-dsm);
		}

		@media screen and (min-width: 40em) {
			margin-inline: var(--spacing-dmd);
		}

		@media screen and (min-width: 48em) {
			margin-inline: var(--spacing-dlg);
		}

		@media screen and (min-width: 64em) {
			max-width: 48em;
			margin-inline: auto;
		}

		@media screen and (min-width: 80em) {
			max-width: 64em;
		}

		@media screen and (min-width: 96em) {
			max-width: 80em;
		}

		@media screen and (min-width: 120em) {
			max-width: 96em;
		}
	}

	:where(main, article, section) > * + * {
		margin-block-start: var(--spacing-dsm);
	}



	/*= Headings =*/

	:where(h1, h2, h3, h4, h5, h6)
	{
		color: currentColor;
		font-family: var(--font-family-title);
		text-wrap: balance;

		@media screen and (prefers-color-scheme: dark) {
			color: var(--color-accent);
		}

		aside ~ & { clear: both; }
	}

	h1
	{
		color: hsl(from currentColor h calc(s - 0.1) calc(l + 4));

		font-size: var(--font-size-4dxl);
		letter-spacing: -2%;
		margin-block: var(--spacing-dsm);

		@media screen and (prefers-color-scheme: dark) {
			color: hsl(from currentColor h calc(s + 0.1) calc(l - 4));
		}
	}

	h2
	{
		color: hsl(from currentColor h calc(s - 0.2) calc(l + 8));

		font-size: var(--font-size-3dxl);
		letter-spacing: -2%;
		margin-block: var(--spacing-dxs);

		@media screen and (prefers-color-scheme: dark) {
			color: hsl(from currentColor h calc(s + 0.2) calc(l - 8));
		}
	}

	h3
	{
		color: hsl(from currentColor h calc(s - 0.3) calc(l + 12));

		font-size: var(--font-size-2dxl);
		letter-spacing: -1%;
		margin-block: var(--spacing-dxs);

		@media screen and (prefers-color-scheme: dark) {
			color: hsl(from currentColor h calc(s + 0.3) calc(l - 12));
		}
	}

	h4
	{
		color: hsl(from currentColor h calc(s - 0.4) calc(l + 16));

		font-size: var(--font-size-dxl);
		margin-block: var(--spacing-2dxs);

		@media screen and (prefers-color-scheme: dark) {
			color: hsl(from currentColor h calc(s + 0.4) calc(l - 16));
		}
	}

	h5
	{
		color: hsl(from currentColor h calc(s - 0.5) calc(l + 20));

		font-size: var(--font-size-dlg);
		margin-block: var(--spacing-2dxs);

		@media screen and (prefers-color-scheme: dark) {
			color: hsl(from currentColor h calc(s + 0.5) calc(l - 20));
		}
	}

	h6
	{
		color: hsl(from currentColor h calc(s - 0.8) calc(l + 32));

		font-size: var(--font-size-dmd);
		margin-block: var(--spacing-2dxs);

		@media screen and (prefers-color-scheme: dark) {
			color: hsl(from currentColor h calc(s + 0.8) calc(l - 32));
		}
	}



	/*= Paragraphs =*/

	p
	{
		text-indent: var(--spacing-dlg);
		text-align: start;
		text-wrap: pretty;

		* { text-indent: initial; }

		&._accent::first-letter
		{
			font-family: var(--font-family-accent);
			font-size: var(--font-size-dxl);
			color: var(--color-accent);
		}

		@media screen and (min-width: 48em) {
			text-align: justify;
		}
	}

	small
	{
		font-size: var(--font-size-dsm);
	}



	/*= Clickables =*/

	:where(a, button, [type="button"], [type="reset"], [type="submit"])
	{
		display: inline-block;
		border: none;
		background: none;
		text-decoration: none;
		cursor: pointer;
	}

	a
	{
		color: var(--color-accent);
		
		&[role="button"],
		&._block
		{
			padding: var(--spacing-dsm);
			background-color: var(--color-accent);
			color: var(--color-light);
			font-weight: 600;
			text-align: center;
			border-radius: var(--border-radius-sm);

			&:active,
			&:hover,
			&:focus
			{
				background-color: var(--color-primary);
				background-color: color-mix(in srgb, var(--color-accent), var(--color-primary) 25%);
			}
		}

		&:not(._block, [role="button"]):active,
		&:not(._block, [role="button"]):hover,
		&:not(._block, [role="button"]):focus
		{
			color: var(--color-primary);
			color: color-mix(in srgb, var(--color-accent), var(--color-primary) 25%);
		}
	}

	:is(button, [type="button"], [type="reset"], [type="submit"])
	{

		& > :is(i, img, svg, span, div) { pointer-events: none; }

		&:disabled
		{
			cursor: not-allowed;
			opacity: .5; 
		}

		&:not(._line)
		{
			padding: var(--spacing-dsm);
			color: var(--color-accent);
			font-weight: 600;
			text-align: center;
			border: var(--border-min) solid var(--color-accent);
			border-radius: var(--border-radius-sm);

			&:active,
			&:hover,
			&:focus
			{
				border-color: var(--color-primary);
				border-color: color-mix(in srgb, var(--color-accent), var(--color-primary) 25%);
			}
		}
		
		&:not(._line)._accent
		{
			color: var(--color-light);
			background-color: var(--color-accent);

			&:active,
			&:hover,
			&:focus
			{
				background-color: var(--color-primary);
				background-color: color-mix(in srgb, var(--color-accent), var(--color-primary) 25%);
			}
		}

		&._line
		{
			background: transparent;
			color: var(--color-accent);

			&._accent { font-family: var(--font-family-accent); }

			&:active,
			&:hover,
			&:focus
			{
				color: var(--color-primary);
				color: color-mix(in srgb, var(--color-accent), var(--color-primary) 25%);
			}

			&:disabled { text-decoration: line-through; }
		}
	}

	[type="reset"]
	{
		&:not(._line)
		{
			color: var(--color-dark);
			border: var(--border-min) solid var(--color-warning);
						
			&:active,
			&:hover,
			&:focus
			{
				border-color: var(--color-warning);
				border-color: color-mix(in srgb, var(--color-warning), var(--color-light) 25%);
			}
		}

		&:not(._line)._accent
		{
			background-color: var(--color-warning);

			&:active,
			&:hover,
			&:focus
			{
				background-color: var(--color-warning);
				background-color: color-mix(in srgb, var(--color-warning), var(--color-light) 25%);
			}
		}	

		&._line
		{
			background: transparent;
			color: var(--color-warning);

			&:active,
			&:hover,
			&:focus
			{
				color: var(--color-warning);
				color: color-mix(in srgb, var(--color-warning), var(--color-light) 25%);
			}
		}
	}



	/*= Aside =*/

	aside
	{
		margin: 1lh auto;
		padding: var(--spacing-dmd);
		width: 80%;
		border-block: var(--border-lg) solid var(--color-accent);
		text-align: start;
		text-wrap: balance;

		&:hover { background-color: var(--color-muted) }
		

		@media screen and (min-width: 48em) {
			margin-inline: var(--spacing-dmd);
			width: clamp(16vw, 30%, 25vw);
			
			&:nth-of-type(odd)  { float: inline-end }
			&:nth-of-type(even) { float: inline-start }
		}
	}



	/*= Quotes =*/
	
	blockquote
	{ 
		padding: var(--spacing-dmd);
		margin-block: var(--spacing-dmd);
		border-inline-start: var(--border-lg) solid var(--color-primary);
		background-color: var(--color-muted);
		font-family: var(--font-family-accent);
		font-size: var(--font-size-dxl);

		p:first-of-type::before { content: open-quote; }
		p:last-of-type::after { content: close-quote; }

		header, footer { font-size: var(--font-size-dlg) }
		header { text-align: center }
		footer { text-align: end }

		@media screen and (prefers-color-scheme: dark) {
			border-inline-start: var(--border-lg) solid var(--color-muted);
			background-color: var(--color-primary);
			color: var(--color-light);
		}
	}

	q
	{
		border-radius: var(--border-radius-xs);
		text-decoration: underline var(--color-muted) dotted var(--border-sm);
		font-family: var(--font-family-accent);
		font-size: var(--font-size-dlg);

		&:hover { background-color: var(--color-muted) }

		@media screen and (prefers-color-scheme: dark) {
			text-decoration: underline var(--color-primary) dotted var(--border-sm);
			
			&:hover { background-color: var(--color-primary) }
		}
	}

	cite
	{
		border-radius: var(--border-radius-xs);
		text-decoration: underline var(--color-muted) dotted var(--border-sm);
		font-style: italic;

		&:hover { background-color: var(--color-muted) }

		@media screen and (prefers-color-scheme: dark) {
			text-decoration: underline var(--color-primary) dotted var(--border-sm);
			
			&:hover { background-color: var(--color-primary) }
		}
	}



	/*= Lists =*/

	li { list-style-position: inside; }
	
	li > :where(ul, ol, dl)
	{
		margin-inline-start: var(--spacing-dlg);
	}

	dl
	{
		& > dt
		{
			font-family: var(--font-family-title);
			font-weight: 600;
		}

		& > dd
		{
			text-indent: var(--spacing-dmd);
		}
	}
	

	/*= Inline text elements =*/

	:where(ins, del, mark, s, abbr)
	{
		border-radius: var(--border-radius-xs);
		padding-inline: var(--spacing-2dxs);
	}

	 ins { background-color: var(--color-info); }
	 del { background-color: var(--color-warning); }
	mark { background-color: var(--color-accent); }
	   s { text-decoration-color: var(--color-danger); }

	abbr[title]
	{
		cursor: help;
		text-decoration: underline dotted var(--color-info);

		&:hover { background-color: var(--color-info); }
	}
	


	/*= Preformatted blocks =*/

	:where(pre, code, samp, kbd)
	{
		font-family: var(--font-family-code);
	}

	pre
	{
		padding: var(--spacing-dxs) 0;
		margin-block: var(--spacing-dsm);
		break-inside: avoid;
		overflow: auto;
		border-inline-start: var(--border-lg) solid var(--color-primary);
		background-color: var(--color-muted);
		color: var(--color-dark);

		&:not(:has(*))
		{
			padding-inline: var(--spacing-dmd);
		}

		&:has(> code)
		{
			direction: ltr;
			text-align: start;
		}

		code,
		samp
		{
			display: block;
			margin: var(--spacing-dxs) var(--spacing-dsm);
			padding: var(--spacing-dxs) var(--spacing-dsm);
			white-space: pre-wrap;
			tab-size: 4;
		}

		samp
		{
			border-radius: var(--border-radius-sm);
			background-color: var(--color-accent);
		}

		@media screen and (prefers-color-scheme: dark) {
			border-inline-start: var(--border-lg) solid var(--color-muted);
			background-color: var(--color-primary);
			color: var(--color-light);

			samp { color: var(--color-dark); }
		}
	}

	kbd
	{
		display: inline-block;
		margin-inline: var(--spacing-2dxs);
		white-space: nowrap;
		font-size: var(--font-size-dsm);

		&:not(:has(kbd, samp)),
		samp &,
		& samp
		{
			padding: var(--spacing-dxs) var(--spacing-dsm);
			border-radius: var(--border-radius-sm);
			vertical-align: baseline;
			line-height: 1;
		}

		&:not(:has(kbd, samp))
		{
			border: var(--border-2xs) solid var(--color-primary);
		}

		samp &,
		& samp
		{
			border: none;
			background-color: var(--color-accent);
		}

		@media screen and (prefers-color-scheme: dark) {
			&:not(:has(kbd, samp))
			{
				border-color: var(--color-accent);
			}

			samp &,
			& samp
			{color: var(--color-dark);
			}
		}
	}



	/*= Images =*/

	:is(img, picture, figure, svg)
	{
		break-inside: avoid;
	}

	figure
	{
		display: block;
		margin-block: var(--spacing-dmd);
		overflow-x: auto;
		cursor: pointer;

		&._full
		{
			inline-size: 100%;

			& > :where(img, picture > img) { inline-size: 100%; }

			figcaption { font-size: var(--font-size-dlg); }
		}

		& > :where(img, picture > img)
		{
			margin-inline: auto;
		}

		figcaption
		{
			padding: var(--spacing-dxs) var(--spacing-dsm);
			margin-block: var(--spacing-dxs);
			font-family: var(--font-family-title);
			text-align: center;

			& cite::before { content: "— "; }
		}
	}



	/*= Tables =*/

	table
	{
		margin-block: var(--spacing-dmd);
		margin-inline: auto;
		overflow-x: auto;
		border-collapse: collapse;
		text-align: justify;
		white-space: nowrap;
		cursor: pointer;

		&._full { inline-size: 100%; }

		figure > &
		{
			width: max-content;
			margin: 0;
			margin-inline: auto;
		}

		thead
		{
			border-block-end: var(--border-xs) solid var(--color-info);
			background-color: color-mix(in hsl, var(--color-info) 25%, transparent);
			font-size: var(--font-size-dmd);
		}

		tfoot
		{
			border-block-start: var(--border-xs) solid var(--color-info);
			background-color: color-mix(in hsl, var(--color-info) 25%, transparent);
			font-size: var(--font-size-dmd);
		}

		tbody > tr
		{
			font-size: var(--font-size-dsm);

			&:nth-child(even)
			{
				background-color: color-mix(in hsl, var(--color-info) 10%, transparent);
			}

			&:hover
			{
				background-color: color-mix(in hsl, var(--color-info) 25%, transparent);
			}
		}

		th { font-family: var(--font-family-title); }

		th, td, caption
		{
			padding: var(--spacing-dxs) var(--spacing-dsm);
		}

		caption
		{
			margin-block: var(--spacing-dxs);
			caption-side: top;
			font-family: var(--font-family-title);

			& cite::before { content: "— "; }
		}
	}



	/*= Forms =*/

	form
	{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;

		&._line { flex-direction: row; }
	}

	label
	{
		font-weight: 600;
		font-size: var(--font-size-dsm);
		cursor: pointer;

		&:has(+ :required)::after
		{
			content: "*";
			margin-inline-start: var(--spacing-2dxs);
			color: var(--color-danger);
		}

		form._line > &:not(:has(+ :where(input, select)))
		{
			margin-inline-end: var(--spacing-dsm);
		}

		form:not(._line) > &:not(:has(+ :where(input, select, textarea, small)))
		{
			margin-block-end: var(--spacing-dmd);
		}

		input,
		select,
		textarea,
		small
		{
			display: block;
			margin-block: var(--spacing-dxs);
			inline-size: 100%;
		}

		[type="checkbox"],
		[type="radio"]
		{
			max-block-size: 2ch;
			max-inline-size: 2ch;
			margin-inline: 0;
		}

		&:has(input[type="checkbox"]),
		&:has(input[type="radio"])
		{
			display: flex;
			align-items: flex-start;
			gap: var(--spacing-dsm);
			font-weight: 400;

			& span, 
			& :not(input)
			{
				flex: 1;
			}
		}
	}

	:where(input, select, textarea, small)
	{
		form._line > &
		{
			margin-inline-end: var(--spacing-dsm);
		}

		form:not(._line) > &:not(:has(+ small))
		{
			margin-block-end: var(--spacing-dmd);
		}

	}

	[type="email"],
	[type="password"],
	[type="search"],
	[type="text"],
	[type="number"],
	[type="tel"],
	[type="url"],
	[type="date"],
	[type="datetime-local"],
	[type="month"],
	[type="time"],
	[type="week"],
	[type="color"],
	[type="range"],
	select,
	textarea
	{
		padding: var(--spacing-dsm);
		border: var(--border-min) solid var(--color-muted);
		border-radius: var(--border-radius-sm);
		font-weight: 400;
		cursor: pointer;

		&::placeholder { color: var(--color-muted); }
		&:focus::placeholder { color: var(--color-secondary); }

		&:disabled
		{
			opacity: .5;
			background-color: var(--color-muted);
			cursor: not-allowed;
		}

		&:valid:not(:placeholder-shown) {
			border-color: var(--color-success);
		}

		&:invalid:not(:placeholder-shown) {
			border-color: var(--color-error);
		}
	}

	[type="color"]
	{
		padding: var(--spacing-dxs);
		background-color: color-mix(in hsl, transparent, var(--color-light));
	}

	[type="file"]
	{
		padding: var(--spacing-dxs);
		border: var(--border-min) solid var(--color-muted);
		border-radius: var(--border-radius-sm);
		cursor: pointer;

		&::file-selector-button
		{
			padding: var(--spacing-dsm);
			background-color: var(--color-accent);
			border: none;
			border-radius: calc(var(--border-radius-sm) - var(--spacing-dxs));
			color: var(--color-light);
			font-size: var(--font-size-dsm);

			:hover { background-color: var(--color-primary); }
		}
	}

	fieldset {
		margin-block-end: var(--spacing-dmd);
		padding-block: var(--spacing-dxs);

		& > * + * {
			margin-block-start: var(--spacing-dsm);
		}

		legend {
			font-family: var(--font-family-title);
			font-size: var(--font-size-dmd);
			color: var(--color-accent);

			@media (prefers-color-scheme: dark) {
				color: var(--color-accent);
			}
		}
	}

	/* Form notices */

	form small
	{
		font-size: var(--font-size-dxs);
		font-weight: 400;
		color: var(--color-accent);
		margin-block-start: var(--spacing-2dxs);
		
		:where(input, select, textarea):valid:not(:placeholder-shown) ~ &
		{
			color: var(--color-success);
		}

		:where(input, select, textarea):invalid:not(:placeholder-shown) ~ &
		{
			color: var(--color-error);
		}
	}

	progress { width: 100%; }
 


	/*= Accordions =*/
	
	details
	{
		padding: var(--spacing-dsm);
		border: var(--border-2xs) solid var(--color-muted);
		border-radius: var(--border-radius-sm);
		width: 100%;

		&[open]
		{
			border-color: var(--color-accent);
		}

		&:has(+ details)
		{
			margin-block-end: 0;
			border-bottom-width: 0;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		details + &
		{
			margin-block-start: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	}

	summary
	{
		font-size: var(--font-size-dlg);
		font-family: var(--font-family-accent);
		cursor: pointer;
	}
}





/*------------------------------------*\
  #CLASS-COMPONENTS
\*------------------------------------*/

/*= Alerts =*/

@layer generic {

	.alert
	{
		display: grid;
		grid-gap: var(--spacing-dsm);
		align-items: center;
		padding: var(--spacing-dmd);
		margin-block-end: var(--spacing-dmd);
		font-size: var(--font-size-dsm);
		text-align: start;
		background-color: color-mix(in srgb, var(--color-info) 10%, white);
		border: var(--border-2xs) solid var(--color-info);
		border-radius: var(--border-radius-md);
		box-shadow: var(--box-shadow-subtler);
	}

	@media screen and (prefers-reduced-motion: no-preference) {
	}

	@media screen and (prefers-reduced-motion: reduce) {
	}

	@media screen and (prefers-color-scheme: dark) {

	}

	@media screen and (display-mode: fullscreen) {

	}

	@media screen and (display-mode: standalone) {

	}

	@media screen and (display-mode: minimal-ui) {

	}
}





/*= Cards =*/

@layer generic {

	.card
	{
		display: flex;
		overflow: hidden;
		flex-direction: column;
		gap: var(--spacing-dxs);
		margin: var(--spacing-dsm);
		background-color: var(--color-light);
		border: var(--border-min) solid color-mix(in srgb, var(--color-dark), var(--color-light) 60%);
		border-radius: var(--border-radius-md);
		box-shadow: var(--box-shadow-base);
		font-family: var(--font-family-base);
		font-size: var(--font-size-dmd);

		&:hover { border-color: var(--color-info); }

		& > *
		{
			padding-block: var(--spacing-dxs);
			padding-inline: var(--spacing-dmd);
			font-size: inherit;

			&:first-child { padding-block-start: var(--spacing-dsm); }
			&:last-child  { padding-block-end:   var(--spacing-dsm); }
		}

		& > :where(img, picture, figure, svg)
		{
			flex-grow: 0;
			overflow: hidden;
			border-radius: unset;
			transition: transform var(--duration-base) ease-in-out;

			&:first-child
			{
				padding: 0;
				border-start-start-radius: inherit;
				border-start-end-radius:   inherit;
			}

			&:last-child
			{
				padding: 0;
				border-end-start-radius: inherit;
				border-end-end-radius:   inherit;
			}

			&:hover
			{
				cursor: grab;
				transform: scale(1.15);
			}

			img { width: 100%; }
		}

		& > :where(header, h1, h2, h3, h4, h5, h6)
		{
			display: flex;
			align-items: center;
			margin: 0;
			font-size: var(--font-size-dxl);
			font-family: var(--font-family-title);
			font-size: inherit;
			font-weight: bold;
		}

		& > :where(footer, nav, menu)
		{
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: var(--spacing-dxs);
			color: var(--color-muted);

			:hover { color: var(--color-accent); }
		}

		.stat
		{
			color: var(--color-primary);
			font-family: var(--font-family-code);
			font-size: var(--font-size-4dxl);
			font-weight: bolder;
			text-align: center;
		}
	}

	@media screen and (orientation: portrait) {

	}

	@media screen and (orientation: landscape) {

	}

	@media screen and (max-width: 40em) {

	}

	@media screen and (min-width: 40em) {

	}

	@media screen and (min-width: 48em) {

	}

	@media screen and (min-width: 64em) {

	}

	@media screen and (min-width: 80em) {

	}

	@media screen and (min-width: 96em) {

	}

	@media screen and (min-width: 120em) {

	}

	@media screen and (prefers-reduced-motion: no-preference) {
	}

	@media screen and (prefers-reduced-motion: reduce) {
	}

	@media screen and (prefers-color-scheme: dark) {

	}

	@media screen and (display-mode: fullscreen) {

	}

	@media screen and (display-mode: standalone) {

	}

	@media screen and (display-mode: minimal-ui) {

	}
}





/*= Sets =*/

@layer generic {

	.set {
		--current-radius: var(--border-radius-sm);

		display: inline-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		padding: 0;

		&._col { flex-direction: column; }
		
		& > * { flex-shrink: 1; }

		&:not(._col) > *
		{
			margin: 0;
			border-radius: 0;

			&:first-child
			{
				border-start-start-radius: var(--current-radius);
				border-end-start-radius: var(--current-radius);
			}

			&:last-child
			{
				border-start-end-radius: var(--current-radius);
				border-end-end-radius: var(--current-radius);
			}

			&:not(:first-child) { border-inline-start: none; }
			&:not(:last-child)  { border-inline-end: none; }
		}

		&._col > *
		{
			margin: 0;
			border-radius: 0;

			&:first-child
			{
				border-start-start-radius: var(--current-radius);
				border-start-end-radius: var(--current-radius);
			}

			&:last-child
			{
				border-end-start-radius: var(--current-radius);
				border-end-end-radius: var(--current-radius);
			}

			&:not(:first-child) { border-block-start: none; }
			&:not(:last-child)  { border-block-end: none; }
		}
	}
	@media screen and (orientation: portrait) {

	}

	@media screen and (orientation: landscape) {

	}

	@media screen and (max-width: 40em) {

	}

	@media screen and (min-width: 40em) {

	}

	@media screen and (min-width: 48em) {

	}

	@media screen and (min-width: 64em) {

	}

	@media screen and (min-width: 80em) {

	}

	@media screen and (min-width: 96em) {

	}

	@media screen and (min-width: 120em) {

	}

	@media screen and (prefers-reduced-motion: no-preference) {
	}

	@media screen and (prefers-reduced-motion: reduce) {
	}

	@media screen and (prefers-color-scheme: dark) {

	}

	@media screen and (display-mode: fullscreen) {

	}

	@media screen and (display-mode: standalone) {

	}

	@media screen and (display-mode: minimal-ui) {

	}
}