/**
 * Typography System
 * Roboto-based typographic scale
 * Namespace: nim-
 */

/* ==========================================
   HEADINGS
   ========================================== */

.nim-h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.nim-h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
}

.nim-h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  letter-spacing: 0;
  color: var(--text-primary);
}

.nim-h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-relaxed);
  letter-spacing: 0;
  color: var(--text-primary);
}

.nim-h5 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-loose);
  letter-spacing: 0;
  color: var(--text-primary);
}

.nim-h6 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-loose);
  letter-spacing: 0;
  color: var(--text-primary);
}

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



.nim-body {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-body);
  letter-spacing: 0;
  color: var(--text-primary);
}

.nim-body-small {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-body);
  letter-spacing: 0;
  color: var(--text-secondary);
}

.nim-supporting-text {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
}

.nim-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--grey-550);
}

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

.nim-text-primary { color: var(--text-primary) ; }
.nim-text-secondary { color: var(--text-secondary); }
.nim-text-tertiary { color: var(--text-tertiary); }
.nim-text-placeholder { color: var(--text-placeholder); }
.nim-text-disabled { color: var(--text-disabled); }

.nim-text-brand-blue { color: var(--blue-550); }
.nim-text-brand-orange { color: var(--orange-550); }

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

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

.nim-uppercase { text-transform: uppercase; }
.nim-lowercase { text-transform: lowercase; }
.nim-capitalize { text-transform: capitalize; }


.nim-url {
    text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;


}

.nim-url:hover {
  color: var(--blue-550) !important;
    font-weight: var(--font-normal);
        text-decoration: underline;
}


/* ==========================================
   FONT SIZE UTILITIES
   ========================================== */

.nim-text-3xl {
  font-size: var(--text-3xl);
}

.nim-text-2xl {
  font-size: var(--text-2xl);
}

.nim-text-xl {
  font-size: var(--text-xl);
}

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

.nim-text-base {
  font-size: var(--text-base) !important;
}

.nim-text-sm {
  font-size: var(--text-sm) !important;
}

.nim-text-xs {
  font-size: var(--text-xs);
}


.nim-readable {
  max-width: 65ch;
  line-height: 1.6;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}



/* 6. Break Up Wall of Text - Example decorative elements */
.nim-readable blockquote {
  border-left: 3px solid #3b82f6; /* Accent border */
  padding-left: 1em;
  margin-left: 0;
  margin-right: 0;
  color: #4b5563; /* Slightly muted text */
}