/* Shared application typography and core branding rules. */

html {
	font-size: 16px;
}

body {
	font-family: var(--brand-font-sans);
	font-size: var(--brand-font-size-md);
	line-height: var(--brand-line-height-body);
	color: var(--brand-color-text);
	background: var(--brand-color-surface);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
	font-family: var(--brand-font-sans);
	color: var(--brand-color-heading);
	font-weight: var(--brand-font-weight-bold);
	line-height: var(--brand-line-height-tight);
	letter-spacing: -0.02em;
	margin-bottom: var(--brand-space-3);
}

h1 {
	font-size: var(--brand-font-size-3xl);
}

h2 {
	font-size: var(--brand-font-size-2xl);
}

h3 {
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
}

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

h5 {
	font-size: 1.125rem;
}

h6 {
	font-size: 1rem;
}

p,
li,
label,
input,
select,
textarea,
button {
	font-family: var(--brand-font-sans);
}

p,
li {
	font-size: var(--brand-font-size-md);
	line-height: var(--brand-line-height-body);
	color: var(--brand-color-text);
}

p {
	margin-bottom: var(--brand-space-4);
}

small,
.small {
	font-size: var(--brand-font-size-sm);
	color: var(--brand-color-text-muted);
}

.text-muted {
	color: var(--brand-color-text-muted) !important;
}

a {
	color: var(--brand-color-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

a:hover,
a:focus {
	color: var(--brand-color-link-hover);
}

code,
pre,
.font-monospace,
.mono {
	font-family: var(--brand-font-mono);
}

.lead {
	font-size: var(--brand-font-size-lg);
	line-height: var(--brand-line-height-loose);
	color: var(--brand-color-text-muted);
}

/* ─── Hero-card meta pills (shared across all dashboards) ───── */
.hero-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	border: 1px solid #d7e3f4;
	background: #f6f9ff;
	color: #33516f;
	white-space: nowrap;
}

.hero-meta-pill-verified {
	border-color: #b7e4c7;
	background: #e6f7ee;
	color: #1a7f3f;
}

/* ─── Shared compact hero (replaces per-app *-hero-card sizing) ───── */
.app-hero {
	background: #fff;
	border: 1px solid #dde6f2;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(16, 42, 67, 0.04);
	margin-bottom: 1rem;
	overflow: visible;
}
.app-hero .app-hero-body {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 1rem;
}
.app-hero .app-hero-left {
	min-width: 0;
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.app-hero .app-hero-eyebrow {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6d8399;
	margin-bottom: 0.05rem;
	line-height: 1;
}
.app-hero .app-hero-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: #102a43;
	margin: 0;
	line-height: 1.3;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.app-hero .app-hero-title > i { font-size: 1em; }
.app-hero .app-hero-subtitle {
	font-size: 0.75rem;
	color: #6d8399;
	margin: 0.1rem 0 0;
	line-height: 1.3;
}
.app-hero .app-hero-right {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	justify-content: flex-end;
	flex: 0 1 auto;
}
@media (max-width: 767.98px) {
	.app-hero .app-hero-body {
		flex-wrap: wrap;
		padding: 0.55rem 0.85rem;
	}
	.app-hero .app-hero-title { font-size: 0.98rem; }
}

.form-label {
	font-size: var(--brand-font-size-sm);
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-color-heading);
}

.form-control,
.form-select {
	font-size: var(--brand-font-size-md);
	border-color: var(--brand-color-border);
}

.form-control:focus,
.form-select:focus,
.btn:focus {
	border-color: rgba(15, 136, 242, 0.45);
	box-shadow: 0 0 0 0.25rem var(--brand-color-accent-soft);
}

.btn {
	font-weight: var(--brand-font-weight-semibold);
}