/**
 * Levels 2026 base layer: reset, typography defaults, links, focus, a11y helpers.
 * Components (buttons, eyebrows, tags, sections, container, flow) are in components.css.
 * Tokens only (tokens.css). Oracle sources: Oxygen normalize (oxygen.css), universal.css
 * globals (a, h1-h6, body, hr, ::selection).
 */

/* ---------- Reset (Oxygen normalize subset that the site relies on) ---------- */
html {
	box-sizing: border-box;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	position: relative;
	margin: 0;
	overflow-x: clip; /* Oxygen body.oxygen-aos-enabled: overflow-x hidden */
	background-color: var(--lvl-color-bg);
	color: var(--lvl-color-text);
	font-family: var(--lvl-font-light);
	font-size: var(--lvl-fs-body);
	font-weight: var(--lvl-fw-regular);
	line-height: var(--lvl-lh-body);
}

img {
	max-width: 100%;
	border-style: none;
}

svg:not(:root) {
	overflow: hidden;
}

b,
strong {
	font-weight: bolder;
}

sup {
	position: relative;
	top: 0;
}

hr {
	width: 100%;
	height: 1px;
	margin: 0 0 1.0625rem;
	border: 0;
	background-color: var(--lvl-color-text);
}

button,
input,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
}

::selection {
	background: var(--lvl-color-selection);
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--lvl-color-text);
	font-family: var(--lvl-font-medium);
	font-weight: var(--lvl-fw-light);
}

h1 {
	font-size: var(--lvl-fs-h1);
	line-height: var(--lvl-lh-h1);
}

h2 {
	font-size: var(--lvl-fs-h2);
	line-height: var(--lvl-lh-h2);
}

h3,
h4,
h5,
h6 {
	font-size: var(--lvl-fs-h3);
	line-height: var(--lvl-lh-h3);
}

/* Links: underlined in the text colour, violet on hover (universal.css
   a:not(.btn):not(…)). Components that are links but not text links (buttons, nav,
   cards) reset this with their own class. */
a {
	color: var(--lvl-color-text);
	text-decoration: underline;
}

a:hover {
	color: var(--lvl-color-violet);
}

/* Look-alike heading classes (Oxygen .h1-style, .h2-style, .h3-style, .mega). */
.lvl-h1 {
	font-family: var(--lvl-font-medium);
	font-size: var(--lvl-fs-h1);
	font-weight: var(--lvl-fw-medium);
	line-height: var(--lvl-lh-tight);
}

.lvl-h2 {
	font-size: var(--lvl-fs-h2);
	line-height: var(--lvl-lh-h2);
}

.lvl-mega {
	font-size: var(--lvl-fs-mega);
	font-weight: var(--lvl-fw-medium);
	line-height: normal;
}

.lvl-text-xs {
	font-size: var(--lvl-fs-xs);
}

.lvl-text-gradient-warm,
.lvl-text-gradient-cold {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lvl-text-gradient-warm {
	background-image: var(--lvl-gradient-text-warm);
}

.lvl-text-gradient-cold {
	background-image: var(--lvl-gradient-text-cold);
}

/* ---------- Layout ---------- */
/* <main> is its own block formatting context like the oracle's flex content wrapper:
   margins of the first/last block do not collapse through it. */
.lvl-site-main {
	display: flow-root;
}

/* ---------- Focus ---------- */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--lvl-color-violet);
	outline-offset: 3px;
}

/* ---------- Accessibility helpers ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

.lvl-skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: var(--lvl-z-offcanvas);
	padding: 0.62rem 1.25rem;
	border-radius: var(--lvl-radius-btn);
	background-color: var(--lvl-color-text);
	color: var(--lvl-color-bg);
	font-size: var(--lvl-fs-base);
	text-decoration: none;
	transform: translateY(-200%);
}

.lvl-skip-link:focus {
	color: var(--lvl-color-bg);
	transform: none;
}