/* 
 * Typography Styles
 * Text styling and font utilities
 */

/* ===== Font Import ===== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ===== Text Sizes ===== */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.text-sm {
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.text-base {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: 1.5;
}

.text-xl {
  font-size: var(--font-size-xl);
  line-height: 1.4;
}

.text-2xl {
  font-size: var(--font-size-2xl);
  line-height: 1.3;
}

.text-3xl {
  font-size: var(--font-size-3xl);
  line-height: 1.2;
}

/* ===== Text Colors ===== */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

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

.text-success {
  color: var(--accent-green);
}

.text-error {
  color: var(--accent-red);
}

.text-warning {
  color: var(--accent-yellow);
}

.text-info {
  color: var(--primary-400);
}

/* ===== Text Alignment ===== */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* ===== Text Transform ===== */
.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* ===== Text Effects ===== */
.text-shadow {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.text-shadow-sm {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

.text-shadow-lg {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.8);
}

.text-glow {
  text-shadow: 0 0 10px currentColor;
}

.text-glow-strong {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor;
}

/* ===== Text Utilities ===== */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-wrap {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

/* ===== Headings ===== */
.heading-1 {
  font-size: var(--font-size-3xl);
  line-height: 1.2;
  color: var(--text-primary);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.heading-2 {
  font-size: var(--font-size-2xl);
  line-height: 1.3;
  color: var(--text-primary);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.heading-3 {
  font-size: var(--font-size-xl);
  line-height: 1.4;
  color: var(--text-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

.heading-4 {
  font-size: var(--font-size-lg);
  line-height: 1.4;
  color: var(--text-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

/* ===== Special Text Styles ===== */
.logo-text {
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  text-shadow: 
    2px 2px 0 rgba(0, 0, 0, 0.8),
    0 0 20px var(--primary-400);
  letter-spacing: 0.1em;
}

.status-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

.version-text {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  opacity: 0.7;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

.chat-sender {
  font-size: var(--font-size-xs);
  font-weight: bold;
  color: var(--accent-yellow);
}

.chat-timestamp {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ===== Interactive Text ===== */
.link {
  color: var(--primary-400);
  text-decoration: none;
  transition: color var(--transition-fast);
  cursor: pointer;
}

.link:hover {
  color: var(--primary-300);
  text-decoration: underline;
}

.link:active {
  color: var(--primary-500);
}