/* ============================================================
   CloudEASE Reset & Base Styles
   ============================================================
   Modern CSS reset with accessible defaults.
   Loaded after tokens.css, before all other stylesheets.
   
   Based on: modern-normalize + accessible additions.
   ============================================================ */


/* ---------------------------------------------------------
   BOX MODEL
   Border-box everywhere. No surprises.
   --------------------------------------------------------- */

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


/* ---------------------------------------------------------
   DOCUMENT
   --------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	tab-size: 4;
	scroll-behavior: smooth;
}

/* Respect motion preferences for scroll behavior */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}


/* ---------------------------------------------------------
   BODY
   --------------------------------------------------------- */

body {
	margin: 0;
	padding: 0;
	font-family: var(--ce-font-family);
	font-size: var(--ce-font-size-base);
	font-weight: var(--ce-font-weight-normal);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
	background-color: var(--ce-color-bg);
}


/* ---------------------------------------------------------
   TYPOGRAPHY — Reset
   Strip default margins. Styles defined in typography.css.
   --------------------------------------------------------- */

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

p, blockquote, pre, figure, figcaption {
	margin: 0;
}


/* ---------------------------------------------------------
   LISTS
   Reset list styles. Re-apply in components as needed.
   --------------------------------------------------------- */

ul, ol, dl {
	margin: 0;
	padding: 0;
}

/* Preserve semantics for screen readers when list-style is removed.
   Safari removes list role when list-style: none — this restores it. */
ul[role="list"],
ol[role="list"] {
	list-style: none;
}

nav ul,
nav ol {
	list-style: none;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

a {
	color: var(--ce-color-text-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--ce-color-text-link-hover);
}

/* Links must be distinguishable from surrounding text (WCAG 1.4.1).
   Underline is the default. Never remove without a visible alternative. */


/* ---------------------------------------------------------
   IMAGES & MEDIA
   --------------------------------------------------------- */

img, svg, video, canvas, audio, iframe, embed, object {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
	border-style: none;
}

/* Decorative images — ensure screen readers skip them */
img[alt=""] {
	user-select: none;
}


/* ---------------------------------------------------------
   TABLES
   Strip browser defaults. Styled in components.css.
   --------------------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

th {
	text-align: left;
	font-weight: var(--ce-font-weight-semibold);
}

td, th {
	padding: 0;
}

caption {
	text-align: left;
}


/* ---------------------------------------------------------
   FORMS — Base Reset
   Normalize across browsers. Detailed styles in forms.css.
   --------------------------------------------------------- */

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	border: none;
	background: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
	appearance: button;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
	cursor: not-allowed;
}

/* Remove inner border and padding in Firefox */
::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

textarea {
	resize: vertical;
	overflow: auto;
}

/* Remove spinner in number inputs — Chrome, Safari, Edge */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/* Fix search input appearance in Chrome and Safari */
[type="search"] {
	-webkit-appearance: textfield;
	appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* File upload button */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Placeholder styling */
::placeholder {
	color: var(--ce-color-text-muted);
	opacity: 1; /* Firefox fix — default is 0.54 */
}

/* Fieldset & legend reset */
fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

legend {
	padding: 0;
	display: table; /* wrapping fix */
}

/* Labels */
label {
	cursor: pointer;
}


/* ---------------------------------------------------------
   FOCUS — Global
   Visible focus indicators for all interactive elements.
   WCAG 2.4.7 — must be visible, 3:1 contrast.
   
   Never use outline: none without replacement.
   --------------------------------------------------------- */

:focus-visible {
	outline: var(--ce-focus-ring);
	outline-offset: var(--ce-focus-ring-offset);
}

/* Remove outline for mouse clicks, keep for keyboard */
:focus:not(:focus-visible) {
	outline: none;
}


/* ---------------------------------------------------------
   SKIP LINK
   First focusable element on every page.
   Hidden until focused via keyboard. (WCAG 2.4.1)
   --------------------------------------------------------- */

.ce-skip-link {
	position: absolute;
	top: calc(-1 * var(--ce-space-2xl));
	left: var(--ce-space-base);
	z-index: var(--ce-z-skip-link);
	padding: var(--ce-space-sm) var(--ce-space-base);
	background-color: var(--ce-color-bg-white);
	color: var(--ce-color-primary);
	font-weight: var(--ce-font-weight-semibold);
	text-decoration: none;
	border: var(--ce-border);
	border-radius: var(--ce-radius-base);
	box-shadow: var(--ce-shadow-base);
	transition: top var(--ce-transition-fast);
}

.ce-skip-link:focus-visible {
	top: var(--ce-space-sm);
}


/* ---------------------------------------------------------
   SCREEN READER ONLY
   Visually hidden but accessible to assistive technology.
   Use for labels, descriptions, live regions.
   --------------------------------------------------------- */

.ce-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Allow sr-only elements to become visible when focused
   (e.g., skip links that use both classes) */
.ce-sr-only--focusable:focus,
.ce-sr-only--focusable:focus-within {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}


/* ---------------------------------------------------------
   SELECTION
   --------------------------------------------------------- */

::selection {
	background-color: var(--ce-color-primary-light);
	color: var(--ce-color-text);
}


/* ---------------------------------------------------------
   MISC
   --------------------------------------------------------- */

/* Correct font weight in Chrome and Safari */
b, strong {
	font-weight: var(--ce-font-weight-bold);
}

/* Correct font size for code elements */
code, kbd, samp, pre {
	font-family: var(--ce-font-family-mono);
	font-size: 1em;
}

small {
	font-size: var(--ce-font-size-sm);
}

/* Prevent sub and sup from affecting line height */
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Abbreviation — show underline on hover for mouse users */
abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
	border-bottom: none;
}

/* Horizontal rule */
hr {
	margin: 0;
	border: none;
	border-top: var(--ce-border-light);
}

/* Hidden attribute — ensure it works even with display overrides */
[hidden] {
	display: none !important;
}

/* Disable animations/transitions for reduced motion users */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}