/*
 *	====================
 *	2-base.css — The foundational layer after the reset.
 *	====================
 *
 *	Adapted from bambino-therapy for the session tracker's design theme:
 *	- colours are role tokens (--ink, --muted, --pri…), not --hue-*
 *	- NO default size, padding, fill or height on form controls or buttons.
 *	  The design's .in / .b / .seg / .chip … (css/components/) set their own,
 *	  and an attribute selector here (input[type="text"]) would out-rank them.
 *	- no default size on p / label, so text inherits from its container
 *	  (a 14px .banner keeps 14px paragraphs)
 *	- th / td live in components/table.css
 */



/*
 * Selection Styling
 * --ring (blue 200) is a tint in light and a shade in dark; --ink flips with it.
 */

::selection {
	background: var(--ring);
	text-shadow: none;
	color: var(--ink);
}


/* Input Placeholder Text. Fields (.in) set their own, see components/form.css */
::placeholder {
	color: var(--muted);
	opacity: 1;
}



/*
 * Base Document Styles
 * html keeps the browser's own font size (the design is in px, not rem).
 */

body {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--ink);
	background-color: var(--bg);
	font-size: var(--p);
	line-height: 1.5;
	font-weight: 400;
}



/*
 * Typography
 * Restores basic heading styles and link visibility.
 * Weight and letter-spacing: see 5-theme.css.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: inherit;
}

h1 {
	font-size: var(--h1);
	line-height: 1.15;
}

h2 {
	font-size: var(--h2);
}

h3 {
	font-size: var(--h3);
}

h4 {
	font-size: var(--h4);
}

h5 {
	font-size: var(--h5);
}

h6 {
	font-size: var(--h6);
}

small {
	font-size: var(--small);
	line-height: 1.5;
}

a {
	color: var(--pri);
	text-decoration: underline;
	/* Makes links obviously clickable by default. */
}



/* -- Lists -- */

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

ul,
ol {
	margin: 0;
	padding-left: var(--space-250);
}

li {
	margin: 0;
}



/* -- Inputs and buttons --
 * Only what the reset removed and nothing visual: inherit the font and colour,
 * give buttons a pointer, restore native checkbox and radio.
 */

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

input[type="checkbox"],
input[type="radio"] {
	/* Restores the basic appearance of a checkbox/radio. */
	-webkit-appearance: revert;
	appearance: revert;
}

textarea {
	resize: vertical;
	/* Allow only vertical resizing. */
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	cursor: pointer;
}



/* -- Misc -- */

hr {
	border: 0;
	border-top: solid var(--border-width) var(--line);
}

img {
	max-width: 100%;
	height: auto;
}