/* LMS shared type system — titles, sections, body, captions, stats */
@import url('./portal-inter-font.css');
@import url('./theme.css');

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ty-title: 1.875rem;      /* 30px page titles */
  --ty-feature: 1.5rem;      /* 24px featured headings */
  --ty-section: 1rem;        /* 16px section headings */
  --ty-card: 0.875rem;       /* 14px card titles */
  --ty-body: 0.875rem;       /* 14px body / list titles */
  --ty-caption: 0.75rem;     /* 12px meta, labels */
  --ty-stat: 1.5rem;         /* 24px stat numbers */
  --ty-weight-title: 800;
  --ty-weight-section: 700;
  --ty-weight-emphasis: 600;
  --ty-weight-body: 400;
  --ty-weight-medium: 500;
  --c-title: #111827;        /* Gray 900 */
  --c-item: #1f2937;         /* Gray 800 */
  --c-body: #6b7280;         /* Gray 500 */
  --c-caption: #9ca3af;      /* Gray 400 */
}

body {
  font-family: var(--font-sans);
  font-size: var(--ty-body);
  font-weight: var(--ty-weight-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ */
/* Utility classes                                                     */
/* ------------------------------------------------------------------ */

.ty-title {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-title) !important;
  font-weight: var(--ty-weight-title) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  color: var(--c-title) !important;
}

.ty-subtitle {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-body) !important;
  font-weight: var(--ty-weight-body) !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  color: var(--c-body) !important;
}

.ty-feature {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-feature) !important;
  font-weight: var(--ty-weight-title) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.3 !important;
  color: var(--c-title) !important;
}

.ty-section {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-section) !important;
  font-weight: var(--ty-weight-section) !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--c-title) !important;
}

.ty-card {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-card) !important;
  font-weight: var(--ty-weight-section) !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--c-title) !important;
}

.ty-body {
  font-size: var(--ty-body) !important;
  font-weight: var(--ty-weight-body) !important;
  color: var(--c-body) !important;
  line-height: 1.5 !important;
}

.ty-item {
  font-size: var(--ty-body) !important;
  font-weight: var(--ty-weight-emphasis) !important;
  color: var(--c-item) !important;
  line-height: 1.4 !important;
}

.ty-caption {
  font-size: var(--ty-caption) !important;
  font-weight: var(--ty-weight-body) !important;
  color: var(--c-caption) !important;
  line-height: 1.4 !important;
}

.ty-label {
  font-size: var(--ty-caption) !important;
  font-weight: var(--ty-weight-medium) !important;
  color: var(--c-caption) !important;
  line-height: 1.3 !important;
}

.ty-stat {
  font-size: var(--ty-stat) !important;
  font-weight: var(--ty-weight-title) !important;
  color: var(--c-title) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

/* ------------------------------------------------------------------ */
/* Page title — 30px ExtraBold Gray 900                                */
/* ------------------------------------------------------------------ */

main h1:not(aside h1):not([data-brand-name]),
.page-content h1,
#loginPage h1:not([data-brand-name]),
#loginScreen h1:not([data-brand-name]),
#authContainer h1:not([data-brand-name]),
#signupScreen h1:not([data-brand-name]),
h1.text-2xl.font-bold.text-gray-800:not([data-brand-name]),
h1.text-3xl.font-bold.text-gray-800:not([data-brand-name]) {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-title) !important;
  font-weight: var(--ty-weight-title) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
}

main h1:not(aside h1):not([data-brand-name]):not(.text-white),
.page-content h1:not(.text-white),
#loginPage h1:not([data-brand-name]):not(.text-white),
#loginScreen h1:not([data-brand-name]):not(.text-white),
#authContainer h1:not([data-brand-name]):not(.text-white),
#signupScreen h1:not([data-brand-name]):not(.text-white),
h1.text-2xl.font-bold.text-gray-800:not([data-brand-name]),
h1.text-3xl.font-bold.text-gray-800:not([data-brand-name]) {
  color: var(--c-title) !important;
}

/* Page subtitle — 14px Regular Gray 500 */
main h1:not(aside h1) + p,
.page-content h1 + p,
#loginPage h1:not([data-brand-name]) + p,
#loginScreen h1 + p,
#authContainer h1 + p {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-body) !important;
  font-weight: var(--ty-weight-body) !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

main h1:not(aside h1) + p:not(.text-white):not([class*="text-teal"]):not([class*="text-white"]),
.page-content h1 + p:not(.text-white):not([class*="text-teal"]):not([class*="text-white"]),
#loginPage h1:not([data-brand-name]) + p,
#loginScreen h1 + p,
#authContainer h1 + p {
  color: var(--c-body) !important;
}

/* Featured heading — 24px ExtraBold Gray 900 */
main h2:not(aside h2):not(.text-lg):not(.font-semibold),
main h2.text-xl:not(aside h2),
main h2.text-2xl:not(aside h2),
main h2.text-3xl:not(aside h2),
.page-content h2.text-xl,
.page-content h2.text-2xl,
#authContainer h2 {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-feature) !important;
  font-weight: var(--ty-weight-title) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.3 !important;
  color: var(--c-title) !important;
}

/* Section heading — 16px Bold Gray 900 */
main h3:not(aside h3),
main h2.text-lg:not(aside h2),
main h2.font-semibold:not(aside h2):not(.text-xl):not(.text-2xl):not(.text-3xl),
.page-content h3,
.page-content h2.text-lg,
.page-content h2.font-semibold:not(.text-xl):not(.text-2xl) {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-section) !important;
  font-weight: var(--ty-weight-section) !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--c-title) !important;
}

/* Card title — 14px Bold Gray 900 */
main h4:not(aside h4),
.page-content h4 {
  font-family: var(--font-sans) !important;
  font-size: var(--ty-card) !important;
  font-weight: var(--ty-weight-section) !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--c-title) !important;
}

/* Stat number — 24px ExtraBold (keep green/red/yellow status colors) */
main .stat-card p.text-3xl,
main .stat-card p.text-2xl,
main p.text-3xl,
main p.text-2xl.font-bold,
main p.text-2xl.font-extrabold,
.page-content p.text-3xl,
.page-content p.text-2xl.font-bold,
main .text-xl.font-extrabold,
main .text-3xl.font-extrabold,
main .text-4xl.font-extrabold,
[id^="stat-"],
[id^="profile-stat-"] {
  font-size: var(--ty-stat) !important;
  font-weight: var(--ty-weight-title) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

main .stat-card p.text-3xl.text-gray-800,
main p.text-3xl.text-gray-800,
.page-content p.text-3xl.text-gray-800,
.page-content p.text-2xl.font-bold.text-gray-800,
[id^="stat-"].text-slate-900,
[id^="profile-stat-"].text-slate-900,
main .font-extrabold.text-ink-900,
main .font-extrabold.text-gray-900 {
  color: var(--c-title) !important;
}

/* Stat labels — 12px Medium Gray 400 */
.stat-card p.text-sm.font-medium.text-gray-500 {
  font-size: var(--ty-caption) !important;
  font-weight: var(--ty-weight-medium) !important;
  color: var(--c-caption) !important;
}

.handwritten,
.hand {
  font-family: 'Caveat', cursive !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}