@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&display=swap");
:root {
  --sb-primary: #62DAA8;
  --sb-text: #EDF2F0;
  --sb-highlight-text: #7BE0B6;
  --sb-background-primary: #131B18;
  --sb-background-secondary: #1D2B25;
  --sb-button-primary: #62DAA8;
  --sb-button-text: #131B18;
  --sb-card: #1D2B25;
  --sb-card-text: #EDF2F0;
  --sb-card-border-color: #AFC0B9;
  --sb-panel: #EDF2F0;
  --sb-panel-text: #131B18;
  --sb-header: #131B18;
  --sb-header-text: #EDF2F0;
  --sb-nav-background: #131B18;
  --sb-nav-icon: #EDF2F0;
  --sb-nav-icon-active: #7BE0B6;
  --sb-shadow-color: #00000066;
  --sb-radius-sm: 6px;
  --sb-radius-md: 12px;
  --sb-radius-lg: 16px;
  --sb-card-border-size: 1px;
  --sb-shadow-size: 0px;
  --sb-shadow-blur: 0px;
  --sb-shadow: 0 0px 0px #00000066;
  --sb-font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb-font-body: "Figtree", 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); }