/* ============================================
   TradEdge Base Typography Standards
   Shared across all pages — minimum readable sizes
   ============================================ */

/* Global font smoothing — eliminates subpixel jagged strokes on HiDPI */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #e8e6e1;
}

/* Base body */
body, html {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Input labels */
label {
  font-size: 14px !important;
}

/* Input fields */
input, select, textarea {
  font-size: 15px !important;
}

/* Tables */
table, td, th {
  font-size: 14px !important;
}
th {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
tr {
  min-height: 44px !important;
  line-height: 1.6 !important;
}

/* Small/muted text — enforce minimum */
small, .small {
  font-size: 12px !important;
}

/* Nav links */
nav a, .nav-link {
  font-size: 14px !important;
}

/* Dropdown options */
option {
  font-size: 14px !important;
}

/* Global contrast floor — overrides page-level :root vars */
:root {
  --t2: #999999;
  --t3: #777777;
  --t4: #666666;
}

/* ── Status Dots ── */
/* Replace color emoji dots 🟢🟡🟠🔴🔵 */
/* Usage: <span class="dot dot-green">●</span> */

.dot {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
}
.dot-green  { color: #00ff88; }
.dot-yellow { color: #f59e0b; }
.dot-orange { color: #f97316; }
.dot-red    { color: #ff4444; }
.dot-blue   { color: #3b82f6; }
.dot-grey   { color: #666; }
.dot-white  { color: #ccc; }

/* Pulse dot — for live/active indicators */
.dot-pulse {
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Icon helper ── */
/* Inline SVG icons via ICONS.* */
.te-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}
.te-icon svg {
  stroke: currentColor;
}
.te-icon-sm svg {
  width: 14px; height: 14px;
}
.te-icon-md svg {
  width: 16px; height: 16px;
}
.te-icon-lg svg {
  width: 20px; height: 20px;
}

/* ── Text contrast standards ── */
:root {
  --text-primary:   #e8e6e1;
  --text-secondary: #999999;
  --text-muted:     #888888;
  --text-dim:       #666666;
  --text-disabled:  #444444;
}