/* ── DPanel Base — CSS Variables + Reset + Typography ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* Color system */
  --bg-base:        #0d1017;
  --bg-surface:     #141820;
  --bg-elevated:    #1c2130;
  --bg-hover:       #212638;
  --border:         rgba(255,255,255,0.07);
  --border-strong:  rgba(255,255,255,0.12);
  --border-accent:  rgba(79,142,247,0.35);

  /* Accents */
  --accent:         #4f8ef7;
  --accent-dim:     rgba(79,142,247,0.15);
  --accent-green:   #3dd68c;
  --accent-green-dim: rgba(61,214,140,0.15);
  --accent-red:     #f75f5f;
  --accent-red-dim: rgba(247,95,95,0.15);
  --accent-amber:   #f5a623;
  --accent-amber-dim: rgba(245,166,35,0.15);

  /* Text */
  --text-primary:   #e4e8f0;
  --text-secondary: #7a86a0;
  --text-muted:     #3d4a60;

  /* Typography */
  --font-ui:        'DM Sans', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-card: 0 1px 0 0 rgba(255,255,255,0.04) inset,
                 0 20px 40px -8px rgba(0,0,0,0.5),
                 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-elevated: 0 1px 0 0 rgba(255,255,255,0.06) inset,
                     0 32px 64px -12px rgba(0,0,0,0.7),
                     0 0 0 1px rgba(255,255,255,0.1);
  --shadow-focus:  0 0 0 3px rgba(79,142,247,0.25);

  /* Motion */
  --ease-out-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-back:    cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   160ms;
  --duration-base:   260ms;
  --duration-slow:   420ms;
}

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ── Typography ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 0.9375rem; }

p { color: var(--text-secondary); line-height: 1.65; }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Utility ────────────────────────────────────────────────────────────────── */
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent    { color: var(--accent); }
.text-green     { color: var(--accent-green); }
.text-red       { color: var(--accent-red); }
.text-amber     { color: var(--accent-amber); }
.text-mono      { font-family: var(--font-mono); }
.text-sm        { font-size: 0.8125rem; }
.text-xs        { font-size: 0.6875rem; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.truncate       { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Fade-in animation for page load */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}