/**
 * Typography System - Modern & Clean
 * NewYorkCity.com.br
 *
 * Font Stack: Inter (Primary)
 */

/* ========================================
   ROOT VARIABLES - Typography
   ======================================== */
:root {
  /* Font Families */
  --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-secondary: 'Nunito Sans', 'Montserrat', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	
  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Fluid Typography - Responsive font sizes using clamp() */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);       /* 12-14px */
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);         /* 14-16px */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);       /* 16-18px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);     /* 18-20px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);         /* 20-24px */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);      /* 24-30px */
  --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);    /* 30-36px */
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);          /* 36-48px */
  --text-5xl: clamp(3rem, 2.55rem + 2.25vw, 4rem);            /* 48-64px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --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-primary);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: #1a1a1a;
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ========================================
   HEADINGS
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #1a1a1a;
  margin-top: 0;
  margin-bottom: 0.75em;
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.1;
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

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

h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: 1.4;
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: 1.5;
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ========================================
   PARAGRAPH & TEXT
   ======================================== */
p {
  margin-top: 0;
  margin-bottom: 1.25em;
  line-height: var(--leading-relaxed);
  font-size: var(--text-base);
  color: #333;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: #444;
  font-weight: var(--font-regular);
}

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

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

/* ========================================
   LINKS
   ======================================== */
a {
  color: #003580;
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: all 0.2s ease;
}

a:hover {
  color: #0057b8;
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #003580;
  outline-offset: 2px;
}

/* ========================================
   LISTS
   ======================================== */
ul, ol {
  margin-top: 0;
  margin-bottom: 1.5em;
  padding-left: 1.5em;
  line-height: var(--leading-relaxed);
}

li {
  margin-bottom: 0.5em;
  color: #333;
}

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

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Font Weights */
.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); }

/* Text Sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/* 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); }

/* 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); }

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

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

/* ========================================
   BLOCKQUOTES
   ======================================== */
blockquote {
  margin: 2em 0;
  padding: 1.5em 2em;
  background: #f8f9fa;
  border-left: 4px solid #003580;
  font-size: var(--text-lg);
  font-style: italic;
  color: #555;
  line-height: var(--leading-relaxed);
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  margin-top: 1em;
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--font-semibold);
  color: #003580;
}

/* ========================================
   CODE & PRE
   ======================================== */
code {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  padding: 0.2em 0.4em;
  background: #f5f5f5;
  border-radius: 3px;
  color: #d63384;
}

pre {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.875em;
  line-height: 1.6;
  padding: 1.5em;
  background: #f8f9fa;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5em 0;
}

pre code {
  padding: 0;
  background: none;
  color: inherit;
}

/* ========================================
   STRONG & EMPHASIS
   ======================================== */
strong, b {
  font-weight: var(--font-bold);
  color: #1a1a1a;
}

em, i {
  font-style: italic;
}

mark {
  background: #febb02;
  padding: 0.1em 0.3em;
  color: #1a1a1a;
  border-radius: 2px;
}

/* ========================================
   HORIZONTAL RULE
   ======================================== */
hr {
  border: 0;
  height: 1px;
  background: #e0e0e0;
  margin: 2.5em 0;
}

/* ========================================
   SELECTION
   ======================================== */
::selection {
  background: #003580;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #003580;
  color: #fff;
  text-shadow: none;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  body {
    font-size: 16px; /* Base size for mobile */
  }

  h1, h2, h3 {
    margin-bottom: 0.6em;
  }

  p {
    margin-bottom: 1em;
  }

  blockquote {
    padding: 1em 1.5em;
    margin: 1.5em 0;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
  }
}