/* Professional Font System for Nextion SaaS Platform */
/* Using Inter font for modern, professional appearance */

/* Import Inter font with all weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Global font system */
:root {
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line heights for better readability */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Letter spacing for professional look */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
}

/* Apply Inter font globally */
* {
  font-family: var(--font-family-primary);
}

body {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Typography hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: #1a202c;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

h2 {
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
}

h3 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
}

h5 {
  font-size: 1.125rem;
  font-weight: var(--font-weight-medium);
}

h6 {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
}

/* Body text */
p {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  margin-bottom: 1rem;
  color: #4a5568;
}

/* Links */
a {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

/* Buttons */
.btn {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: none;
}

.btn-primary {
  font-weight: var(--font-weight-semibold);
}

/* Form elements */
input, textarea, select {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
}

/* Navigation */
.navbar-brand {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

.nav-link {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
}

/* Cards */
.card-title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
}

.card-text {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

/* Tables */
.table th {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
}

.table td {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
}

/* Alerts */
.alert {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
}

.alert-heading {
  font-weight: var(--font-weight-semibold);
}

/* Badges */
.badge {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
}

/* Modal */
.modal-title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
}

.modal-body {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

/* Footer */
footer {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
}

/* Utility classes for font weights */
.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; }

/* Utility classes for letter spacing */
.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }

/* Responsive typography */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1.125rem; }
  h6 { font-size: 1rem; }
}

@media (max-width: 576px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.875rem; }
}

/* Code and monospace elements */
code, pre, kbd, samp {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-normal);
}

/* Print styles */
@media print {
  body {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
  }
}