/* Global Styles and Typography — ProblemX */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography Headings */
.display-lg {
  font-family: var(--font-secondary);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.display-md {
  font-family: var(--font-secondary);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1, .h1 {
  font-family: var(--font-secondary);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h2, .h2 {
  font-family: var(--font-secondary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

.body-md {
  font-size: var(--fs-body-md);
  line-height: 1.6;
}

.body-sm {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Color Helpers */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-muted { color: var(--color-text-secondary); }

/* Background Helpers */
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-secondary-light { background-color: var(--color-secondary-light); }
.bg-success-light { background-color: var(--color-success-light); }
.bg-danger-light { background-color: var(--color-danger-light); }
.bg-warning-light { background-color: var(--color-warning-light); }

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* Common Layout Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.grid { display: grid; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.m-0 { margin: 0; }
.p-0 { padding: 0; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }

.text-center { text-align: center; }

/* Interactive items active states animation */
.animated-click {
  transition: transform 0.1s ease;
}
.animated-click:active {
  transform: scale(0.96);
}

/* Visibility stubs for pages dynamic showing/hiding */
.page-section {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.page-section.active {
  display: block;
  opacity: 1;
}
.page-section.active-flex {
  display: flex;
  opacity: 1;
}

/* Standard glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .glass {
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
}