/* ============================================================
   CloudEASE Typography
   ============================================================
   Loaded after reset.css.
   All sizes in rem. All line-heights unitless.
   Heading hierarchy must follow WCAG 2.4.6 — never skip levels.
   ============================================================ */


/* ---------------------------------------------------------
   HEADINGS
   One <h1> per page. h1 → h2 → h3, never skip.
   Margins provide vertical rhythm between sections.
   --------------------------------------------------------- */

.ce-h1 {
	font-size: var(--ce-font-size-2xl);
	font-weight: var(--ce-font-weight-bold);
	line-height: var(--ce-line-height-tight);
	color: var(--ce-color-text);
	margin-bottom: var(--ce-space-base);
}

.ce-h2 {
	font-size: var(--ce-font-size-xl);
	font-weight: var(--ce-font-weight-semibold);
	line-height: var(--ce-line-height-tight);
	color: var(--ce-color-text);
	margin-bottom: var(--ce-space-base);
}

.ce-h3 {
	font-size: var(--ce-font-size-lg);
	font-weight: var(--ce-font-weight-semibold);
	line-height: var(--ce-line-height-tight);
	color: var(--ce-color-text);
	margin-bottom: var(--ce-space-md);
}

.ce-h4 {
	font-size: var(--ce-font-size-md);
	font-weight: var(--ce-font-weight-medium);
	line-height: var(--ce-line-height-tight);
	color: var(--ce-color-text);
	margin-bottom: var(--ce-space-sm);
}

.ce-h5 {
	font-size: var(--ce-font-size-base);
	font-weight: var(--ce-font-weight-semibold);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
	margin-bottom: var(--ce-space-sm);
}

.ce-h6 {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-semibold);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text-secondary);
	margin-bottom: var(--ce-space-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Direct element selectors within .ce-main
   so headings work without classes in component markup.
   Use .ce-h1–.ce-h6 classes when visual size ≠ semantic level. */
.ce-main h1 { font-size: var(--ce-font-size-2xl); font-weight: var(--ce-font-weight-bold); line-height: var(--ce-line-height-tight); margin-bottom: var(--ce-space-md); }
.ce-main h2 { font-size: var(--ce-font-size-xl); font-weight: var(--ce-font-weight-semibold); line-height: var(--ce-line-height-tight); margin-bottom: var(--ce-space-base); }
.ce-main h3 { font-size: var(--ce-font-size-lg); font-weight: var(--ce-font-weight-semibold); line-height: var(--ce-line-height-tight); margin-bottom: var(--ce-space-md); }
.ce-main h4 { font-size: var(--ce-font-size-md); font-weight: var(--ce-font-weight-medium); line-height: var(--ce-line-height-tight); margin-bottom: var(--ce-space-sm); }
.ce-main h5 { font-size: var(--ce-font-size-base); font-weight: var(--ce-font-weight-semibold); line-height: var(--ce-line-height-normal); margin-bottom: var(--ce-space-sm); }
.ce-main h6 { font-size: var(--ce-font-size-sm); font-weight: var(--ce-font-weight-semibold); line-height: var(--ce-line-height-normal); color: var(--ce-color-text-secondary); margin-bottom: var(--ce-space-sm); text-transform: uppercase; letter-spacing: 0.04em; }


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

.ce-text {
	font-size: var(--ce-font-size-base);
	line-height: var(--ce-line-height-normal);
	color: var(--ce-color-text);
}

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

.ce-text--lg {
	font-size: var(--ce-font-size-md);
}

.ce-text--secondary {
	color: var(--ce-color-text-secondary);
}

.ce-text--muted {
	color: var(--ce-color-text-muted);
}

.ce-text--danger {
	color: var(--ce-color-error);
}

/* Section heading line-height override for compact layouts */
.ce-section .ce-h6.ce-mb-0,
.ce-section .ce-h6.ce-mb-sm {
	line-height: var(--ce-line-height-small);
}

/* Paragraphs inside content areas get vertical spacing */
.ce-main p + p {
	margin-top: var(--ce-space-base);
}


/* ---------------------------------------------------------
   INLINE TEXT
   --------------------------------------------------------- */

.ce-strong {
	font-weight: var(--ce-font-weight-semibold);
}

.ce-em {
	font-style: italic;
}

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

.ce-code {
	font-family: var(--ce-font-family-mono);
	font-size: 0.875em; /* relative to parent, not root */
	background-color: var(--ce-color-bg);
	padding: var(--ce-space-2xs) var(--ce-space-xs);
	border-radius: var(--ce-radius-sm);
}

.ce-mark {
	background-color: var(--ce-color-warning-light);
	padding: var(--ce-space-2xs) var(--ce-space-xs);
	border-radius: var(--ce-radius-sm);
}


/* ---------------------------------------------------------
   LINKS
   Underline is the default (set in reset.css).
   These are contextual modifiers.
   --------------------------------------------------------- */

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

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

.ce-link:visited {
	color: var(--ce-color-primary-active);
}

/* Link with file type indicator (WCAG 2.4.4) */
.ce-link--pdf::after     { content: " (PDF)"; font-size: var(--ce-font-size-sm); }
.ce-link--excel::after   { content: " (Excel)"; font-size: var(--ce-font-size-sm); }
.ce-link--word::after    { content: " (Word)"; font-size: var(--ce-font-size-sm); }
.ce-link--external::after { content: " ↗"; font-size: var(--ce-font-size-sm); }

/* Navigation links — no underline, rely on context */
.ce-nav a {
	text-decoration: none;
}

.ce-nav a:hover {
	text-decoration: none;
}


/* ---------------------------------------------------------
   LISTS — Content Lists
   Only styled inside .ce-main content areas.
   Navigation/component lists use their own styles.
   --------------------------------------------------------- */

.ce-main ul,
.ce-main ol {
	padding-left: var(--ce-space-lg);
	margin-bottom: var(--ce-space-base);
}

.ce-main li {
	margin-bottom: var(--ce-space-xs);
	line-height: var(--ce-line-height-normal);
}

.ce-main li > ul,
.ce-main li > ol {
	margin-top: var(--ce-space-xs);
	margin-bottom: 0;
}

/* Definition lists — used in detail/summary pages */
.ce-dl {
	display: grid;
	grid-template-columns: minmax(8rem, auto) 1fr;
	gap: var(--ce-space-sm) var(--ce-space-base);
}

.ce-dl__term {
	font-weight: var(--ce-font-weight-semibold);
	color: var(--ce-color-text-secondary);
	font-size: var(--ce-font-size-sm);
}

.ce-dl__detail {
	color: var(--ce-color-text);
}

/* Responsive: stack on small screens / high zoom */
@media (max-width: 30em) {
	.ce-dl {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------
   DATA VALUES
   Large numbers on dashboards (revenue, totals, counts).
   --------------------------------------------------------- */

.ce-data-value {
	font-size: var(--ce-font-size-3xl);
	font-weight: var(--ce-font-weight-bold);
	line-height: var(--ce-line-height-tight);
	color: var(--ce-color-text);
}

.ce-data-value--sm {
	font-size: var(--ce-font-size-xl);
}

.ce-data-label {
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text-secondary);
	line-height: var(--ce-line-height-normal);
}

/* Positive / negative indicators (WCAG 1.4.1).
   NEVER use these classes without a visible text prefix (↑ / ↓ / + / −).
   Color alone must not convey meaning. 
   
   Correct:  <span class="ce-data-value--positive">↑ $1,200</span>
   Wrong:    <span class="ce-data-value--positive">$1,200</span>
*/
.ce-data-value--positive {
	color: var(--ce-color-success);
}

.ce-data-value--negative {
	color: var(--ce-color-error);
}


/* ---------------------------------------------------------
   LABEL / CAPTION
   Reusable for form labels, table captions, section labels.
   --------------------------------------------------------- */

.ce-label {
	display: block;
	font-size: var(--ce-font-size-sm);
	font-weight: var(--ce-font-weight-medium);
	color: var(--ce-color-text);
	line-height: var(--ce-line-height-normal);
	margin-bottom: var(--ce-space-xs);
}

.ce-caption {
	font-size: var(--ce-font-size-xs);
	color: var(--ce-color-text-muted);
	line-height: var(--ce-line-height-normal);
}


/* ---------------------------------------------------------
   TRUNCATION
   For table cells and tight layouts. Use with fixed-width
   containers only — never on headings or labels.
   --------------------------------------------------------- */

.ce-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Multi-line clamp (2 lines) */
.ce-line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* ---------------------------------------------------------
   TEXT ALIGNMENT UTILITIES
   --------------------------------------------------------- */

.ce-text-left   { text-align: left; }
.ce-text-center { text-align: center; }
.ce-text-right  { text-align: right; }


/* ---------------------------------------------------------
   RESPONSIVE TYPOGRAPHY
   Scale down slightly on small screens / high zoom.
   --------------------------------------------------------- */

@media (max-width: 30em) {
	.ce-h1,
	.ce-main h1 {
		font-size: var(--ce-font-size-xl);
	}

	.ce-h2,
	.ce-main h2 {
		font-size: var(--ce-font-size-lg);
	}

	.ce-h3,
	.ce-main h3 {
		font-size: var(--ce-font-size-md);
	}

	.ce-data-value {
		font-size: var(--ce-font-size-xl);
	}

	.ce-data-value--sm {
		font-size: var(--ce-font-size-lg);
	}

	.ce-dl {
		grid-template-columns: 1fr;
	}
}