/* Professional Typography System for Trading Platform */
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* CSS Variables for Font System */
:root {
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Fira Code', Consolas, monospace;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

/* Global Font Settings */
* {
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}

body {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-normal) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Typography Classes */
.font-ui {
  font-family: var(--font-ui) !important;
}

.font-mono {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
}

.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* Trading-Specific Typography */
.price-display {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.05em !important;
}

.symbol-display {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.percentage-display {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.025em !important;
}

.ui-text {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-medium) !important;
}

.ui-label {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.025em !important;
}

/* Form Elements */
input, textarea, select {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-normal) !important;
}

input[type="number"], .number-input {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Button Styles */
button, .btn {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0.025em !important;
}

/* Table & Data Display */
table, .table {
  font-family: var(--font-ui) !important;
}

th {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-semibold) !important;
}

td {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-normal) !important;
}

.data-cell, .numeric-cell {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-bold) !important;
  letter-spacing: -0.025em !important;
}

/* Navigation & Menu */
nav, .nav, .menu {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-medium) !important;
}

/* Price Summary & Ticker */
.price-summary-wrapper,
.price-summary,
#price-summary {
  font-family: var(--font-ui) !important;
}

.price-item {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-medium) !important;
}

.price-item .label {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.price-item .change,
.price-item .value {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.05em !important;
}

/* Trading Interface */
.trading-panel {
  font-family: var(--font-ui) !important;
}

.chart-container {
  font-family: var(--font-ui) !important;
}

.stat, .stats {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-normal) !important;
}

.stat b, .stats b {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-variant-numeric: tabular-nums !important;
}

/* List Items */
.list-row, .Li {
  font-family: var(--font-ui) !important;
}

.list-row .p1, .Li .p1 {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-semibold) !important;
}

.list-row .p2, .Li .p2 {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-normal) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Rate Display */
.rateup, .ratedown, .rate {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Modal & Dialog */
.modal, .dialog {
  font-family: var(--font-ui) !important;
}

.modal-title, .dialog-title {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-bold) !important;
}

/* Specific Element Overrides */
#px, .price {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-bold) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.05em !important;
}

#chg, .change {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-semibold) !important;
  font-variant-numeric: tabular-nums !important;
}

.symbol, #sym {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* Time & Session Info */
#bo-session-id, #bo-timer {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-bold) !important;
  font-variant-numeric: tabular-nums !important;
}

/* MA Legends & Technical Indicators */
.ma-legend, .technical-indicators {
  font-family: var(--font-ui) !important;
}

.ma-legend b, .technical-indicators b {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-medium) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Time Buttons */
.tfbtn, .time-btn {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0.025em !important;
}

.time-val {
  font-family: var(--font-mono) !important;
  font-weight: var(--font-weight-bold) !important;
}

/* Volume Info */
.volume-info {
  font-family: var(--font-ui) !important;
}

.volume-info b {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Override common frameworks */
.el-button, .layui-btn, .ant-btn {
  font-family: var(--font-ui) !important;
  font-weight: var(--font-weight-medium) !important;
}

/* Ion Framework */
ion-content, ion-header, ion-toolbar, ion-title {
  font-family: var(--font-ui) !important;
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  
  .price-display {
    font-size: 1.1em;
  }
  
  .symbol-display {
    font-size: 0.9em;
  }
}

@media (min-width: 769px) {
  body {
    font-size: 15px;
  }
  
  .price-display {
    font-size: 1.2em;
  }
}