/* DEGOVER Design System — shared tokens
 * Used across degover.mn, atut.degover.mn, gov.gerege.mn
 */
:root {
  /* Brand */
  --c-bg:           #0A0E1A;       /* deep space navy */
  --c-bg-elev:      #111729;
  --c-bg-soft:      #1A2238;
  --c-surface:      #FFFFFF;
  --c-surface-soft: #F5F7FB;
  --c-border:       rgba(255, 255, 255, 0.10);
  --c-border-soft:  rgba(15, 23, 42, 0.08);

  --c-primary:      #3B82F6;       /* sky blue */
  --c-primary-2:    #2563EB;
  --c-accent:       #D4A24C;       /* mongolian gold */
  --c-accent-2:     #B58332;
  --c-success:      #10B981;
  --c-warn:         #F59E0B;
  --c-error:        #EF4444;
  --c-info:         #0EA5E9;

  --c-text:         #0F172A;
  --c-text-soft:    #475569;
  --c-text-muted:   #94A3B8;
  --c-text-on-dark: #F8FAFC;
  --c-text-on-dark-soft: #94A3B8;

  /* Gradients */
  --grad-hero:      linear-gradient(135deg, #0A0E1A 0%, #1E1B4B 50%, #1E3A8A 100%);
  --grad-accent:    linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #D4A24C 100%);
  --grad-card:      linear-gradient(180deg, rgba(59,130,246,0.06) 0%, rgba(212,162,76,0.02) 100%);

  /* Type */
  --ff-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ff-display: 'Inter', system-ui, sans-serif;

  /* Spacing & radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(15,23,42,0.06);
  --sh-md: 0 8px 24px rgba(15,23,42,0.08);
  --sh-lg: 0 24px 64px rgba(15,23,42,0.12);
  --sh-glow: 0 0 60px rgba(59,130,246,0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  background: var(--c-bg);
  color: var(--c-text-on-dark);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-weight: 600; font-size: 15px;
  border: 1px solid transparent;
  transition: all .18s ease;
}
.btn-primary { background: var(--c-primary); color: white; box-shadow: 0 8px 24px rgba(59,130,246,.35); }
.btn-primary:hover { background: var(--c-primary-2); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.06); color: white; border-color: var(--c-border); }
.btn-ghost:hover { background: rgba(255,255,255,.10); }
.btn-accent { background: var(--c-accent); color: var(--c-bg); }
.btn-accent:hover { background: var(--c-accent-2); }

/* Pill / Badge */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(59,130,246,.10);
  color: #93C5FD;
  font-size: 13px; font-weight: 500;
  border: 1px solid rgba(59,130,246,.20);
}
.pill-accent { background: rgba(212,162,76,.10); color: #FCD34D; border-color: rgba(212,162,76,.25); }
.pill-success { background: rgba(16,185,129,.10); color: #6EE7B7; border-color: rgba(16,185,129,.25); }

/* Card */
.card {
  background: var(--grad-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 24px;
  backdrop-filter: blur(8px);
}
.card-light {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-md);
}

/* Glow dot animation */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.3); }
}
.dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 12px var(--c-success);
  animation: pulse-dot 2s ease-in-out infinite;
}