/* ==========================================================================
   Config Modem Telmex - Global Styles & Design System Tokens
   Domain: configmodemtelmex.com.mx
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --primary: #0041a2;
  --primary-container: #0b57d0;
  --on-primary: #ffffff;
  --secondary: #006688;
  --secondary-container: #00c1fd;
  --status-pon-green: #10b981;
  --status-pon-green-bg: #ecfdf5;
  --status-los-red: #ef4444;
  --status-los-red-bg: #fef2f2;
  --status-sync-blue: #0284c7;
  --status-sync-blue-bg: #f0f9ff;
  --code-ip-bg: #eef2f6;
  --code-ip-text: #0c4a6e;
  --surface-canvas: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #f1f5f9;
  --border-subtle: #e2e8f0;
  --border-focus: #93c5fd;
  --on-surface: #131b2e;
  --on-surface-variant: #424654;
}

/* Status glow indicators specified in Design System */
.glow-pon {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

.glow-los {
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.glow-blue {
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.4);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F8FAFC;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Monospace IP styling */
.font-mono-ip {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em;
}

/* Smooth Accordion Details */
details summary::-webkit-details-marker {
  display: none;
}

details[open] summary svg.chevron,
details[open] summary .expand-icon {
  transform: rotate(180deg);
}

/* Prose and Article Content Styling */
.article-body h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--primary);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.article-body h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: var(--on-surface);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.article-body p {
  color: var(--on-surface-variant);
  font-size: 1rem;
  line-height: 1.7rem;
  margin-bottom: 1rem;
}

.article-body ul, .article-body ol {
  color: var(--on-surface-variant);
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.article-body li {
  margin-bottom: 0.5rem;
  line-height: 1.6rem;
}

/* Print Friendly */
@media print {
  header, footer, #live-search-input, .no-print {
    display: none !important;
  }
}