/* NFL Predictions AI - Typography System */
/* Tailwind CSS compatible typography scale and styles */

/* Headings */
h1, .text-4xl, .text-5xl, .text-6xl {
  font-family: var(--font-family-primary);
  font-weight: var(--font-bold);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--gray-900);
}

h2, .text-3xl {
  font-family: var(--font-family-primary);
  font-weight: var(--font-semibold);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--gray-900);
}

h3, .text-2xl {
  font-family: var(--font-family-primary);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--gray-800);
}

h4, .text-xl {
  font-family: var(--font-family-primary);
  font-weight: var(--font-medium);
  line-height: 1.4;
  color: var(--gray-800);
}

h5, .text-lg {
  font-family: var(--font-family-primary);
  font-weight: var(--font-medium);
  line-height: 1.5;
  color: var(--gray-700);
}

h6, .text-base {
  font-family: var(--font-family-primary);
  font-weight: var(--font-medium);
  line-height: 1.5;
  color: var(--gray-700);
}

/* Typography scale */
.text-xs {
  font-size: 0.75rem;      /* 12px */
  line-height: 1rem;       /* 16px */
}

.text-sm {
  font-size: 0.875rem;     /* 14px */
  line-height: 1.25rem;    /* 20px */
}

.text-base {
  font-size: 1rem;         /* 16px */
  line-height: 1.5rem;     /* 24px */
}

.text-lg {
  font-size: 1.125rem;     /* 18px */
  line-height: 1.75rem;    /* 28px */
}

.text-xl {
  font-size: 1.25rem;      /* 20px */
  line-height: 1.75rem;    /* 28px */
}

.text-2xl {
  font-size: 1.5rem;       /* 24px */
  line-height: 2rem;       /* 32px */
}

.text-3xl {
  font-size: 1.875rem;     /* 30px */
  line-height: 2.25rem;    /* 36px */
}

.text-4xl {
  font-size: 2.25rem;      /* 36px */
  line-height: 2.5rem;     /* 40px */
}

.text-5xl {
  font-size: 3rem;         /* 48px */
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;      /* 60px */
  line-height: 1;
}

/* Font weights */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black { font-weight: var(--font-black); }

/* Font styles */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text colors */
.text-primary { color: var(--primary-600); }
.text-secondary { color: var(--gray-600); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

.text-white { color: #ffffff; }
.text-black { color: #000000; }

.text-gray-50 { color: var(--gray-50); }
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }

.text-green { color: var(--accent-green-500); }
.text-green-400 { color: var(--accent-green-400); }
.text-green-500 { color: var(--accent-green-500); }
.text-green-600 { color: var(--accent-green-600); }
.text-green-700 { color: var(--accent-green-700); }

/* Text decoration */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.line-through { text-decoration: line-through; }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Letter spacing */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* Line height */
.leading-3 { line-height: .75rem; }
.leading-4 { line-height: 1rem; }
.leading-5 { line-height: 1.25rem; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-8 { line-height: 2rem; }
.leading-9 { line-height: 2.25rem; }
.leading-10 { line-height: 2.5rem; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* Special text classes */
.text-muted {
  color: var(--gray-500);
}

.text-highlight {
  color: var(--accent-green-500);
  font-weight: var(--font-semibold);
}

.text-brand {
  background: linear-gradient(135deg, var(--accent-green-500) 0%, var(--accent-green-600) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Monospace font family */
.font-mono {
  font-family: var(--font-family-mono);
}

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

.text-ellipsis {
  text-overflow: ellipsis;
}

.text-clip {
  text-overflow: clip;
}

/* Whitespace */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* Word break */
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

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

.break-all {
  word-break: break-all;
}