@import url("https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Mulish:wght@400;500;600;700&display=swap");
:root {
  --sb-primary: #5A93E2;
  --sb-text: #EDEFF2;
  --sb-highlight-text: #74A4E7;
  --sb-background-primary: #13161B;
  --sb-background-secondary: #1D232B;
  --sb-button-primary: #5A93E2;
  --sb-button-text: #13161B;
  --sb-card: #1D232B;
  --sb-card-text: #EDEFF2;
  --sb-card-border-color: #AFB6C0;
  --sb-panel: #EDEFF2;
  --sb-panel-text: #13161B;
  --sb-header: #13161B;
  --sb-header-text: #EDEFF2;
  --sb-nav-background: #13161B;
  --sb-nav-icon: #EDEFF2;
  --sb-nav-icon-active: #74A4E7;
  --sb-shadow-color: #00000066;
  --sb-radius-sm: 10px;
  --sb-radius-md: 20px;
  --sb-radius-lg: 28px;
  --sb-card-border-size: 1px;
  --sb-shadow-size: 4px;
  --sb-shadow-blur: 16px;
  --sb-shadow: 0 4px 16px #00000066;
  --sb-font-display: "Spectral", Georgia, "Times New Roman", serif;
  --sb-font-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb-base-text: var(--sb-text);
  --sb-base-highlight-text: var(--sb-highlight-text);
}
body { background: var(--sb-background-primary); color: var(--sb-text); font-family: var(--sb-font-body); }
h1, h2, h3, h4 { font-family: var(--sb-font-display); }