/**
 * Booknetic for Theme V4 — Design System typography.
 *
 * Provides:
 *   • Heading display utilities  (.ds-display-{sm,md,lg,xl})
 *   • Heading scale utilities    (.ds-h1 .. .ds-h6)
 *   • Body text utilities        (.ds-text-{2xs..3xl})
 *   • Lead / eyebrow / overline   (.ds-lead, .ds-eyebrow, .ds-overline)
 *   • Prose container             (.ds-prose) — long-form content
 *   • Truncate / clamp helpers    (.ds-truncate, .ds-clamp-{2,3,4})
 *   • Font features (kerning, opsz, ss01 when supported)
 *
 * Mobile-first: every utility scales with clamp() where it makes sense.
 */

/* ============================================================ */
/* BASE RESET (only applied to elements inside .ds-prose or by   */
/* explicit utility classes — never mass-applied)                */
/* ============================================================ */

html { font-family: var(--ds-font-sans); }

.ds-typography,
.ds-prose,
body.bft-v4 .ds-typography,
body.bft-v4 .ds-prose {
	font-family: var(--ds-font-sans);
	color: var(--ds-color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern", "ss01", "cv11", "calt";
	text-rendering: optimizeLegibility;
}

/* ============================================================ */
/* DISPLAY (marketing hero)                                       */
/* ============================================================ */

.ds-display-sm,
.ds-display-md,
.ds-display-lg,
.ds-display-xl {
	font-family: var(--ds-font-display);
	font-weight: var(--ds-font-bold);
	line-height: var(--ds-leading-tight);
	letter-spacing: var(--ds-tracking-tighter);
	color: var(--ds-color-text);
	margin: 0;
}
.ds-display-sm { font-size: var(--ds-display-sm); }
.ds-display-md { font-size: var(--ds-display-md); }
.ds-display-lg { font-size: var(--ds-display-lg); }
.ds-display-xl { font-size: var(--ds-display-xl); font-weight: var(--ds-font-extrabold); }

/* Gradient text helper */
.ds-text-gradient {
	background: var(--ds-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ============================================================ */
/* HEADING SCALE                                                  */
/* ============================================================ */

.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-h5,
.ds-h6 {
	font-family: var(--ds-font-display);
	font-weight: var(--ds-font-bold);
	line-height: var(--ds-leading-snug);
	letter-spacing: var(--ds-tracking-tight);
	color: var(--ds-color-text);
	margin: 0;
}
.ds-h1 { font-size: clamp(1.875rem, 0.95rem + 2.6vw, 2.625rem); line-height: var(--ds-leading-tight); }
.ds-h2 { font-size: clamp(1.5rem,   0.95rem + 1.8vw, 2.125rem); }
.ds-h3 { font-size: clamp(1.25rem,  0.95rem + 1.0vw, 1.625rem); }
.ds-h4 { font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.25rem);  }
.ds-h5 { font-size: var(--ds-text-lg); }
.ds-h6 { font-size: var(--ds-text-base); letter-spacing: var(--ds-tracking-wider); text-transform: uppercase; color: var(--ds-color-text-muted); }

/* ============================================================ */
/* BODY TEXT UTILITIES                                            */
/* ============================================================ */

.ds-text-2xs { font-size: var(--ds-text-2xs); line-height: var(--ds-leading-normal); }
.ds-text-xs  { font-size: var(--ds-text-xs);  line-height: var(--ds-leading-normal); }
.ds-text-sm  { font-size: var(--ds-text-sm);  line-height: var(--ds-leading-normal); }
.ds-text-base{ font-size: var(--ds-text-base);line-height: var(--ds-leading-normal); }
.ds-text-md  { font-size: var(--ds-text-md);  line-height: var(--ds-leading-relaxed); }
.ds-text-lg  { font-size: var(--ds-text-lg);  line-height: var(--ds-leading-relaxed); }
.ds-text-xl  { font-size: var(--ds-text-xl);  line-height: var(--ds-leading-relaxed); }
.ds-text-2xl { font-size: var(--ds-text-2xl); line-height: var(--ds-leading-snug); }
.ds-text-3xl { font-size: var(--ds-text-3xl); line-height: var(--ds-leading-snug); }

/* Color modifiers */
.ds-text-strong   { color: var(--ds-color-text); }
.ds-text-muted    { color: var(--ds-color-text-muted); }
.ds-text-subtle   { color: var(--ds-color-text-subtle); }
.ds-text-link     { color: var(--ds-color-text-link); }
.ds-text-link:hover { color: var(--ds-color-text-link-hover); }
.ds-text-success  { color: var(--ds-color-success-text); }
.ds-text-warning  { color: var(--ds-color-warning-text); }
.ds-text-danger   { color: var(--ds-color-danger-text); }
.ds-text-info     { color: var(--ds-color-info-text); }

/* Weight modifiers */
.ds-font-thin       { font-weight: var(--ds-font-thin); }
.ds-font-regular    { font-weight: var(--ds-font-regular); }
.ds-font-medium     { font-weight: var(--ds-font-medium); }
.ds-font-semibold   { font-weight: var(--ds-font-semibold); }
.ds-font-bold       { font-weight: var(--ds-font-bold); }
.ds-font-extrabold  { font-weight: var(--ds-font-extrabold); }

/* Family modifiers */
.ds-font-sans     { font-family: var(--ds-font-sans); }
.ds-font-display  { font-family: var(--ds-font-display); }
.ds-font-mono     { font-family: var(--ds-font-mono); font-feature-settings: "zero", "ss01"; }

/* Numeric tabular figures (for prices, stats, counters) */
.ds-tabular-nums  { font-variant-numeric: tabular-nums; }

/* ============================================================ */
/* SPECIAL VARIANTS                                               */
/* ============================================================ */

/* Lead paragraph — used right under a headline */
.ds-lead {
	font-size: clamp(var(--ds-text-md), 0.9rem + 0.4vw, var(--ds-text-xl));
	line-height: var(--ds-leading-relaxed);
	color: var(--ds-color-text-muted);
	max-width: 60ch;
}

/* Eyebrow — uppercase mini-label above a heading */
.ds-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--ds-text-xs);
	font-weight: var(--ds-font-bold);
	letter-spacing: var(--ds-tracking-widest);
	text-transform: uppercase;
	color: var(--ds-color-text-link);
}

/* Overline — same as eyebrow but contrast-low */
.ds-overline {
	font-size: var(--ds-text-2xs);
	font-weight: var(--ds-font-semibold);
	letter-spacing: var(--ds-tracking-widest);
	text-transform: uppercase;
	color: var(--ds-color-text-subtle);
}

/* Caption — used on figures, micro-help, footnotes */
.ds-caption {
	font-size: var(--ds-text-xs);
	color: var(--ds-color-text-muted);
	line-height: var(--ds-leading-normal);
}

/* Code chip */
.ds-code {
	font-family: var(--ds-font-mono);
	font-size: 0.92em;
	padding: 2px 6px;
	border-radius: var(--ds-radius-xs);
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border-subtle);
	color: var(--ds-color-text);
}

/* ============================================================ */
/* PROSE — long-form (blog posts, docs)                          */
/* ============================================================ */

.ds-prose {
	font-size: var(--ds-text-lg);
	line-height: var(--ds-leading-relaxed);
	color: var(--ds-color-text);
	max-width: var(--ds-container-prose);
}
.ds-prose > * + * { margin-top: 1em; }
.ds-prose h1 { font-size: clamp(1.875rem, 0.95rem + 2.6vw, 2.625rem); font-family: var(--ds-font-display); font-weight: var(--ds-font-bold); margin: 1.6em 0 .6em; letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-tight); }
.ds-prose h2 { font-size: clamp(1.5rem, 0.95rem + 1.8vw, 2rem); font-family: var(--ds-font-display); font-weight: var(--ds-font-bold); margin: 1.6em 0 .6em; letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-snug); }
.ds-prose h3 { font-size: clamp(1.25rem, 0.95rem + 1.0vw, 1.5rem); font-family: var(--ds-font-display); font-weight: var(--ds-font-bold); margin: 1.4em 0 .5em; letter-spacing: var(--ds-tracking-tight); }
.ds-prose h4 { font-size: var(--ds-text-xl); font-weight: var(--ds-font-semibold); margin: 1.4em 0 .5em; }
.ds-prose p  { color: var(--ds-color-text); margin: 1em 0; }
.ds-prose a  { color: var(--ds-color-text-link); text-decoration: underline; text-decoration-color: var(--ds-color-border-strong); text-underline-offset: 0.18em; transition: var(--ds-transition-color); }
.ds-prose a:hover { color: var(--ds-color-text-link-hover); text-decoration-color: var(--ds-color-text-link-hover); }
.ds-prose strong { font-weight: var(--ds-font-semibold); color: var(--ds-color-text); }
.ds-prose em { font-style: italic; }
.ds-prose ul, .ds-prose ol { padding-left: 1.4em; margin: 1em 0; color: var(--ds-color-text); }
.ds-prose li { margin: .35em 0; }
.ds-prose li::marker { color: var(--ds-color-text-muted); }
.ds-prose blockquote {
	margin: 1.6em 0;
	padding: 1em 1.2em;
	border-left: 3px solid var(--ds-color-primary);
	background: var(--ds-color-primary-soft);
	border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
	color: var(--ds-color-text);
	font-style: italic;
}
.ds-prose blockquote p { margin: 0; }
.ds-prose pre {
	background: var(--ds-color-bg-elevated);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-lg);
	padding: 14px 16px;
	overflow-x: auto;
	font-family: var(--ds-font-mono);
	font-size: var(--ds-text-sm);
	line-height: var(--ds-leading-relaxed);
}
.ds-prose code { font-family: var(--ds-font-mono); font-size: 0.92em; padding: 2px 6px; background: var(--ds-color-surface); border-radius: var(--ds-radius-xs); }
.ds-prose pre code { padding: 0; background: transparent; border: 0; font-size: inherit; }
.ds-prose hr { border: 0; border-top: 1px solid var(--ds-color-border-subtle); margin: 2em 0; }
.ds-prose img { border-radius: var(--ds-radius-lg); }
.ds-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: var(--ds-text-sm); }
.ds-prose th, .ds-prose td { padding: 10px 12px; border-bottom: 1px solid var(--ds-color-border-subtle); text-align: left; }
.ds-prose th { color: var(--ds-color-text-muted); font-weight: var(--ds-font-semibold); }

/* ============================================================ */
/* TRUNCATION HELPERS                                             */
/* ============================================================ */

.ds-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.ds-clamp-2,
.ds-clamp-3,
.ds-clamp-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ds-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ds-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.ds-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/* ============================================================ */
/* RESPONSIVE TUNING                                              */
/* ============================================================ */

/* Slightly tighter lead text on narrow viewports */
@media (max-width: 480px) {
	.ds-lead { font-size: var(--ds-text-md); }
}