:root {
  /* Backgrounds */
  --color-bg: #f8f7fc;
  --color-surface: #ffffff;
  --color-surface-soft: #f6f1ff;
  --color-surface-soft-hover: #f1eaff;

  /* Text */
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-soft: #94a3b8;

  /* Main SciFilter accent */
  --color-accent: #8b3dff;
  --color-accent-hover: #7828e6;
  --color-accent-soft: #ede9fe;

  /* Borders */
  --color-border: #e7e3ee;
  --color-border-strong: #d8d1e3;

  /* Status colors */
  --color-success: #22c55e;
  --color-success-soft: #ecfdf5;
  --color-error: #ef4444;
  --color-error-soft: #fee2e2;
  --color-warning: #f59e0b;

  /* Shapes */
  --radius-small: 0.5rem;
  --radius-medium: 0.85rem;
  --radius-large: 1.1rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 18px 45px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-accent: 0 12px 30px rgba(139, 61, 255, 0.2);
}