/**
 * Salt Design System - Typography
 * Based on Figma Design System: https://www.figma.com/design/CqdoCVx42XayJMKQ1mMGgr/Salt-Design-System
 *
 * Typography System:
 * - Primary Font: Inter (sans-serif)
 * - Monospace Font: IBM Plex Mono
 * - Type scale: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl
 * - Font weights: 100-900 (thin to black)
 * - Responsive and accessible
 */

/* ============================================================================
   FONT IMPORTS
   ============================================================================ */

/* Inter Font Family - Variable Font for optimal performance */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* IBM Plex Mono - Monospace Font */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap');

/* ============================================================================
   TYPOGRAPHY TOKENS
   ============================================================================ */

:root {
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  /* Font Sizes - Type Scale */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 6rem;        /* 96px */
  --text-9xl: 8rem;        /* 128px */

  /* Font Weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.3;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* ============================================================================
   BASE TYPOGRAPHY
   ============================================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-base);
  margin-top: 0;
  margin-bottom: 0.5em;
}

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-4xl);
  line-height: var(--leading-normal);
}

h3 {
  font-size: var(--text-3xl);
  line-height: var(--leading-normal);
}

h4 {
  font-size: var(--text-2xl);
  line-height: var(--leading-normal);
}

h5 {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
}

h6 {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

/* ============================================================================
   TEXT ELEMENTS
   ============================================================================ */

p {
  margin-top: 0;
  margin-bottom: 1em;
  line-height: var(--leading-normal);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

strong, b {
  font-weight: var(--font-semibold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
}

mark {
  background-color: var(--color-warning-3);
  color: var(--color-text-base);
  padding: 0.125em 0.25em;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-neutral-3);
  color: var(--color-neutral-11);
  padding: 0.125em 0.375em;
  border-radius: 0.25em;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  background-color: var(--color-neutral-2);
  color: var(--color-text-base);
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
  margin: 1em 0;
}

pre code {
  background-color: transparent;
  padding: 0;
  font-size: inherit;
}

kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background-color: var(--color-neutral-3);
  color: var(--color-text-base);
  padding: 0.25em 0.5em;
  border: 1px solid var(--color-border-base);
  border-radius: 0.25em;
  box-shadow: 0 1px 0 var(--color-border-base);
}

blockquote {
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 4px solid var(--color-border-base);
  color: var(--color-text-subtle);
  font-style: italic;
}

hr {
  border: 0;
  height: 1px;
  background-color: var(--color-border-subtle);
  margin: 2em 0;
}

/* ============================================================================
   LISTS
   ============================================================================ */

ul, ol {
  margin: 0 0 1em 0;
  padding-left: 1.5em;
}

li {
  margin-bottom: 0.25em;
}

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
  margin-top: 0.25em;
}

/* ============================================================================
   UTILITY CLASSES - FONT SIZES
   ============================================================================ */

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

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

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

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

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

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

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

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--leading-normal);
}

.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--leading-snug);
}

.text-6xl {
  font-size: var(--text-6xl);
  line-height: var(--leading-snug);
}

.text-7xl {
  font-size: var(--text-7xl);
  line-height: var(--leading-snug);
}

.text-8xl {
  font-size: var(--text-8xl);
  line-height: var(--leading-tight);
}

.text-9xl {
  font-size: var(--text-9xl);
  line-height: var(--leading-tight);
}

/* ============================================================================
   UTILITY CLASSES - FONT WEIGHTS
   ============================================================================ */

.font-thin {
  font-weight: var(--font-thin);
}

.font-extralight {
  font-weight: var(--font-extralight);
}

.font-light {
  font-weight: var(--font-light);
}

.font-regular {
  font-weight: var(--font-regular);
}

.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);
}

/* ============================================================================
   UTILITY CLASSES - FONT FAMILIES
   ============================================================================ */

.font-sans {
  font-family: var(--font-sans);
}

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

/* ============================================================================
   UTILITY CLASSES - LINE HEIGHTS
   ============================================================================ */

.leading-none {
  line-height: var(--leading-none);
}

.leading-tight {
  line-height: var(--leading-tight);
}

.leading-snug {
  line-height: var(--leading-snug);
}

.leading-normal {
  line-height: var(--leading-normal);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

.leading-loose {
  line-height: var(--leading-loose);
}

/* ============================================================================
   UTILITY CLASSES - LETTER SPACING
   ============================================================================ */

.tracking-tighter {
  letter-spacing: var(--tracking-tighter);
}

.tracking-tight {
  letter-spacing: var(--tracking-tight);
}

.tracking-normal {
  letter-spacing: var(--tracking-normal);
}

.tracking-wide {
  letter-spacing: var(--tracking-wide);
}

.tracking-wider {
  letter-spacing: var(--tracking-wider);
}

.tracking-widest {
  letter-spacing: var(--tracking-widest);
}

/* ============================================================================
   UTILITY CLASSES - TEXT ALIGNMENT
   ============================================================================ */

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

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

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

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

/* ============================================================================
   UTILITY CLASSES - TEXT TRANSFORM
   ============================================================================ */

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

/* ============================================================================
   UTILITY CLASSES - TEXT DECORATION
   ============================================================================ */

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.no-underline {
  text-decoration: none;
}

/* ============================================================================
   UTILITY CLASSES - TEXT COLORS
   ============================================================================ */

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

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

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

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

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

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

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

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

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

/* ============================================================================
   UTILITY CLASSES - TEXT OVERFLOW
   ============================================================================ */

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

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

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

/* ============================================================================
   RESPONSIVE TYPOGRAPHY
   Adjust heading sizes for smaller screens
   ============================================================================ */

@media (max-width: 768px) {
  h1 {
    font-size: var(--text-4xl);
  }

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

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

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

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

  h6 {
    font-size: var(--text-base);
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Ensure focus is visible */
:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}