/*
	@file:   pd-wysheid/commons/styles/style.css
	@brief:  The CSS style-sheet for the pd-wysheid
	@author: madpang
	@date:   [created: 2024-04-21, updated: 2026-01-07]
*/

/* === RESOURCES === */

/* --- Monospace font resources, Latin-1 subset */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 300;
	src: local("IBM Plex Mono Light"), local("IBMPlexMono-Light"), url("../../commons/fonts/IBMPlexMono-Light-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: italic;
	font-weight: 300;
	src: local("IBM Plex Mono Light Italic"), local("IBMPlexMono-LightItalic"), url("../../commons/fonts/IBMPlexMono-LightItalic-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}

/* --- Sans font resources, Latin-1 subset */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	src: local("IBM Plex Sans"), local("IBMPlexSans"), url("../../commons/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}

@font-face {
	font-family: 'IBM Plex Sans';
	font-style: italic;
	font-weight: 400;
	src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), url("IBMPlexSans-Italic-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}

@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 700;
	src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"), url("../../commons/fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}

@font-face {
	font-family: 'IBM Plex Sans';
	font-style: italic;
	font-weight: 700;
	src: local("IBM Plex Sans Bold Italic"), local("IBMPlexSans-BoldItalic"), url("../../IBMPlexSans-BoldItalic-Latin1.woff2") format("woff2");
	unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}

/* === STYLES === */

/* Define global CSS variables within `:root` scope */
:root {
	/* Scaling factor for different screen sizes */
	--var-scaling: 0.5;

	/* Named colors */
	--color-snow:              rgba(255, 255, 255, 1.00);
	--color-mercury:           rgba(235, 235, 235, 1.00);
	--color-silver:            rgba(214, 214, 214, 1.00);
	--color-tin:               rgba(145, 145, 145, 1.00);
	--color-lead:              rgba(33, 33, 33, 1.00);
	--color-licorice:          rgba(0, 0, 0, 1.00);
	--color-maraschino:        rgba(255, 38, 0, 1.00);
	--color-electric-blue:     rgba(44, 117, 255, 1.00);
	--color-lime:     	       rgba(142, 250, 0, 1.00);
	--color-spring:            rgba(0, 249, 0, 1.00);
	--color-frosted-glass:     rgba(214, 214, 214, 0.75);
}

/* Reset browser's default styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Include padding and border in element's total width and height */
}

body {
	--bg-color: var(--color-snow);
	--fg-color: var(--color-lead);
	--code-blk-bg: var(--color-mercury);
}

body.pd-dark-theme {
	--bg-color: var(--color-lead);
	--fg-color: var(--color-snow);
	--code-blk-bg: var(--color-licorice);
}

body {
	/* Base typography */
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: calc(32px * var(--var-scaling));
	line-height: 1.5;
	/* Coloring */
	background-color: var(--bg-color);
	color: var(--fg-color);
}

/* ::-webkit-scrollbar {
	display: none;
} */

/* --- Typography --- */

p {
	margin-top: 0;          /* no margin before paragraph */
	margin-bottom: 0.25rem; /* small margin after paragraph */
}

h2, h3, h4 {
	font-weight: 700;
}

h1 {
	font-size: clamp(2.25rem, 3.2vw, 3.25rem);
	line-height: 1.15;
	margin: 0 0 1.0rem;
}

h2 {
	font-size: clamp(1.60rem, 2.2vw, 2.25rem);
	line-height: 1.20;
	margin: 2.25rem 0 0.75rem;
}

h3 {
	font-size: clamp(1.30rem, 1.6vw, 1.75rem);
	line-height: 1.25;
	margin: 1.75rem 0 0.50rem;
}

h4 {
	font-size: clamp(1.10rem, 1.2vw, 1.35rem);
	line-height: 1.30;
	margin: 1.25rem 0 0.50rem;
}

pre {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.75rem;
	background-color: var(--code-blk-bg);
	padding: calc(16px * var(--var-scaling));
	overflow-x: auto;
	border-radius: calc(8px * var(--var-scaling));
	margin-bottom: calc(24px * var(--var-scaling));
}

a {
	text-decoration: none;
	color: inherit;
}

/* =========================
   Micro-Tailwind (pd-*)
   ========================= */

/* --- Components --- */

.pd-btn {
	/* variables */
	--pd-btn-height: 128px;
	--pd-btn-width: 128px;
	--pd-btn-bg-color: transparent;
	--pd-btn-bg-img: none;
	--pd-btn-hover-mask: rgba(0, 0, 0, 0.1);
	/* default size */
	height: calc(var(--pd-btn-height) * var(--var-scaling));
	width: calc(var(--pd-btn-width) * var(--var-scaling));
	/* visual */
	border-width: 0;                                           /* no border */
	background-color: var(--pd-btn-bg-color);
	background-image: var(--pd-btn-bg-img);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	/* behavior */
	cursor: pointer;}

.pd-dark-theme .pd-btn {
	/* variables override */
	--pd-btn-hover-mask: rgba(255, 255, 255, 0.1);
	/* visual override */
	background-image: var(--pd-btn-bg-img-dark, var(--pd-btn-bg-img)); }

.pd-btn:hover {
	--pd-btn-bg-color: var(--pd-btn-hover-mask); }

.pd-dummy {
	/* pure constructive, for layout purpose */
	pointer-events: none;
	user-select: none;
}

.pd-main-scrollable {
	min-height: 100vh;
	min-width: 100vw;
	overflow-y: auto; }

.pd-article {
	overflow-x: hidden;
}

/* --- Utilities --- */

/* layout */
.pd-flex-container { display: flex; }
.pd-inline-flex { display: inline-flex; }
.pd-layout-row { flex-direction: row; }
.pd-layout-col { flex-direction: column; }
.pd-center-y { align-items: center; }
.pd-center-x { justify-content: center; }
.pd-ml-auto { margin-left: auto; }
.pd-mt-96 { margin-top: calc(96px * var(--var-scaling)); }
.pd-pt-128 { padding-top: calc(128px * var(--var-scaling)); }
.pd-pb-96 { padding-bottom: calc(96px * var(--var-scaling)); }
.pd-pl-96 { padding-left: calc(96px * var(--var-scaling)); }
.pd-pr-96 { padding-right: calc(96px * var(--var-scaling)); }
.pd-flex-1 { flex: 1 1 auto; }
.pd-flex-0 { flex: 0 0 auto; }
.pd-grid { display: grid; }
.pd-tri-cols {
	--pd-cent-width: calc(1802px * var(--var-scaling));
	grid-template-columns: 1fr var(--pd-cent-width) 1fr; }

/* sizing (token-based) */
.pd-h-32 {
	--pd-height: 32px;
	height: calc(var(--pd-height) * var(--var-scaling));}
.pd-h-96 {
	--pd-height: 96px;
	height: calc(var(--pd-height) * var(--var-scaling));}
.pd-w-96 {
	--pd-width: 96px;
	width: calc(var(--pd-width) * var(--var-scaling));}
.pd-w-128 {
	--pd-width: 128px;
	width: calc(var(--pd-width) * var(--var-scaling));}
.pd-h-full { height: 100%; }
.pd-w-full { width: 100%; }

/* positioning */
.pd-viewport-anchor { position: fixed; }  /* position relative to viewport */
.pd-parent-anchor { position: absolute; } /* position relative to nearest positioned ancestor */
.pd-anchor-t-0 { top: 0; }                /* position anchor top */
.pd-anchor-b-0 { bottom: 0; }             /* position anchor bottom */
.pd-anchor-l-0 { left: 0; }               /* position anchor left */
.pd-anchor-r-0 { right: 0; }              /* position anchor right */
.pd-z-1000 { z-index: 1000; }
.pd-z-999  { z-index: 999; }
.pd-z-100 { z-index: 100; }

/* Transformation */
.pd-reverse-x {
	transform: scaleX(-1); }

/* Coloring */
.pd-bg-null { background-color: transparent; }
.pd-bg-color {
	--pd-bg-color: var(--color-mercury);
	background-color: var(--pd-bg-color); }

.pd-dark-theme .pd-bg-color {
	background-color: var(--pd-bg-color-dark, var(--pd-bg-color)); }

.pd-bg-grad-x {
	background-image: linear-gradient(to right,
		var(--pd-grad-color-start, var(--color-lime)),
		var(--pd-grad-color-end, var(--color-frosted-glass))); }

/* --- Debugging utilities --- */

.pd-debug-border {
	--debug-border-thickness: 2px;
	--debug-border-color: var(--color-maraschino);
	border-width: var(--debug-border-thickness);
	border-style: solid;
	border-color: var(--debug-border-color);
}