/* ═══════════════════════════════════════════════
   BASE — Reset, root styles, scrollbar,
   global animations, utility classes.
   ═══════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Root ─── */
html {
  height: 100%;
  /* Prevent iOS font inflation */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  background: var(--void);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden; /* overridden at mobile breakpoint */
  transition: background 0.25s ease, color 0.2s ease;
}

/* ─── Smooth Theme Transitions ─── */
/* Applied globally to interactive/themed elements only to avoid layout thrash */
.sidebar, .topbar, .card, .kpi-card, .nav-item,
.fx-ticker, .compliance-item, .tab-group, .tab-btn,
.badge, .progress-bar, .alert-item, .position-row,
.search-bar, .topbar-btn, .data-table th, .data-table td {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.2s  ease,
    box-shadow       0.25s ease !important;
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar          { width: 4px; height: 4px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--surface2); border-radius: 2px; }

/* ─── Keyframe Animations ─── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.8); }
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ─── Utility Classes ─── */
.shimmer    { animation: shimmer 2s infinite; }

/* Semantic number colours */
.pos        { color: var(--green); }
.neg        { color: var(--red); }
.neu        { color: var(--text-secondary); }
.gold-text  { color: var(--gold); }

/* Data-table cell helpers (also scoped inside .data-table) */
.mono       { font-family: var(--font-mono); font-size: 12px; }
.muted      { color: var(--text-muted); }
.primary    { color: var(--text-primary); font-weight: 500; }

/* Vertical spacers */
.divider    { height: 16px; }
.divider-sm { height: 10px; }