/* PAR Intelligence Demo — Design System
   Matches Project X v0 platform UI (light mode)
   PAR Navy dominant, violet restrained, clean and functional
   ========================================== */

:root {
  /* PAR Brand */
  --par-navy: #2F3452;
  --par-navy-deep: #1E2340;
  --par-violet: #6864D1;
  --par-violet-tint: #F0EFFF;
  --par-violet-hover: #5B57C0;

  /* Surfaces */
  --background: #FAFAFB;
  --card: #FFFFFF;
  --canvas: #F4F5F8;
  --surface-low: #F8F8FA;
  --surface-high: #ECEDF0;

  /* Text */
  --text-primary: #1E2340;
  --text-secondary: #5C6070;
  --text-muted: #8B8FA3;

  /* Borders */
  --border: #E4E5EA;
  --border-subtle: #F0F0F3;

  /* Semantic */
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* Radius */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(30, 35, 64, 0.04);
  --shadow-md: 0 4px 12px rgba(30, 35, 64, 0.06);
  --shadow-lg: 0 8px 24px rgba(30, 35, 64, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--background);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* ========== METRIC CARD ========== */

.metric-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.metric-card .metric-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}
.metric-card .metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.metric-card .metric-delta {
  font-size: 12px; font-weight: 600;
  margin-top: var(--sp-1);
}
.metric-card .metric-delta.up { color: var(--success); }
.metric-card .metric-delta.down { color: var(--error); }