/* ============================================================
   CYRTIX ACADEMY — TYPOGRAPHY SYSTEM v4.0 (FINAL + CLEAN)
   Fully aligned with brand-variables.css v4.1
=========================================================== */

/* ----------------------------------------------
   BASE TEXT SETTINGS
---------------------------------------------- */

html, body {
  font-family: var(--cx-font-body);
  font-size: var(--cx-text-base);
  line-height: var(--cx-leading-normal);
  color: var(--cx-slate-300);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Improve large type readability */
h1, h2, h3, .display-1, .display-2, .display-3 {
  text-wrap: balance;
}

/* ----------------------------------------------
   DISPLAY TYPOGRAPHY (Hero / Showcase)
---------------------------------------------- */

.display-1 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-hero);
  font-weight: var(--cx-weight-black);
  line-height: var(--cx-leading-tight);
  letter-spacing: -0.02em;
  color: var(--cx-slate-50);
  margin-bottom: var(--cx-space-4);
}

.display-2 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-5xl);
  font-weight: var(--cx-weight-bold);
  line-height: 1.15;
  color: var(--cx-slate-50);
  margin-bottom: var(--cx-space-3);
}

.display-3 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-4xl);
  font-weight: var(--cx-weight-semibold);
  line-height: 1.2;
  color: var(--cx-slate-50);
  margin-bottom: var(--cx-space-3);
}

/* ----------------------------------------------
   HEADING SCALE (Semantic Headings)
---------------------------------------------- */

h1, .heading-1 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-4xl);
  font-weight: var(--cx-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cx-slate-50);
  margin-bottom: var(--cx-space-4);
}

h2, .heading-2 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-3xl);
  font-weight: var(--cx-weight-semibold);
  line-height: 1.25;
  color: var(--cx-slate-100);
  margin-top: var(--cx-space-8);
  margin-bottom: var(--cx-space-3);
}

h3, .heading-3 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-2xl);
  font-weight: var(--cx-weight-semibold);
  line-height: 1.3;
  color: var(--cx-slate-100);
  margin-top: var(--cx-space-6);
  margin-bottom: var(--cx-space-2);
}

h4, .heading-4 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-xl);
  font-weight: var(--cx-weight-semibold);
  line-height: var(--cx-leading-normal);
  color: var(--cx-slate-100);
  margin-bottom: var(--cx-space-2);
}

h5, .heading-5 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-sm);
  font-weight: var(--cx-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cx-slate-400);
  margin-bottom: var(--cx-space-1);
}

h6, .heading-6 {
  font-family: var(--cx-font-display);
  font-size: var(--cx-text-xs);
  font-weight: var(--cx-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--cx-slate-500);
  margin-bottom: var(--cx-space-1);
}

/* ----------------------------------------------
   PARAGRAPHS & BODY TEXT
---------------------------------------------- */

.body-large {
  font-size: var(--cx-text-lg);
  line-height: var(--cx-leading-relaxed);
  color: var(--cx-slate-200);
  margin-bottom: var(--cx-space-4);
}

p, .body-base {
  font-size: var(--cx-text-base);
  line-height: var(--cx-leading-normal);
  margin-bottom: var(--cx-space-4);
  color: var(--cx-slate-300);
}

.body-small {
  font-size: var(--cx-text-sm);
  color: var(--cx-slate-500);
  line-height: 1.45;
}

/* ----------------------------------------------
   EMPHASIS & SPECIAL TEXT
---------------------------------------------- */

.lead {
  font-size: var(--cx-text-lg);
  font-weight: var(--cx-weight-medium);
  color: var(--cx-slate-50);
  line-height: var(--cx-leading-relaxed);
  margin-bottom: var(--cx-space-4);
}

.kicker {
  font-size: var(--cx-text-xs);
  font-weight: var(--cx-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--cx-cyan-400);
  margin-bottom: var(--cx-space-2);
}

.subtitle {
  font-size: var(--cx-text-base);
  line-height: var(--cx-leading-normal);
  color: var(--cx-slate-400);
  margin-bottom: var(--cx-space-4);
}

/* ----------------------------------------------
   CYBER / MONOSPACE TEXT
---------------------------------------------- */

.cyber-heading {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-text-base);
  font-weight: var(--cx-weight-semibold);
  color: var(--cx-cyan-400);
  text-shadow: var(--cx-glow-cyan-soft);
}

.cyber-number {
  font-family: var(--cx-font-mono);
  font-weight: var(--cx-weight-bold);
  color: var(--cx-cyan-400);
}

.cyber-label {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cx-cyan-500);
}

/* ----------------------------------------------
   INLINE COLOR UTILITIES
---------------------------------------------- */

.text-primary   { color: var(--cx-slate-50) !important; }
.text-secondary { color: var(--cx-slate-300) !important; }
.text-muted     { color: var(--cx-slate-500) !important; }

.text-cyan      { color: var(--cx-cyan-400) !important; }
.text-crimson   { color: var(--cx-crimson-400) !important; }

/* ----------------------------------------------
   GRADIENT TEXT UTILITIES
---------------------------------------------- */

.text-gradient-cyan {
  background: var(--cx-grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-crimson {
  background: var(--cx-grad-crimson);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-cyberfusion {
  background: var(--cx-grad-cyberfusion);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------
   WEIGHT UTILITIES
---------------------------------------------- */

.font-light     { font-weight: var(--cx-weight-light) !important; }
.font-normal    { font-weight: var(--cx-weight-normal) !important; }
.font-medium    { font-weight: var(--cx-weight-medium) !important; }
.font-semibold  { font-weight: var(--cx-weight-semibold) !important; }
.font-bold      { font-weight: var(--cx-weight-bold) !important; }
.font-extrabold { font-weight: var(--cx-weight-extrabold) !important; }

/* ----------------------------------------------
   ALIGNMENT & HELPERS
---------------------------------------------- */

.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }

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

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}