:root {
  --sb-navy: #073a59;
  --sb-navy-deep: #052d45;
  --sb-purple: #6e1eed;
  --sb-purple-hover: #5d17d0;
  --sb-gold: #f4b740;
  --sb-blue: #4194f4;
  --sb-mint: #1ded9d;
  --sb-ink: #163247;
  --sb-muted: #607286;
  --sb-bg: #f4f7f9;
  --sb-card: #ffffff;
  --sb-line: #d8e2e8;
  --sb-red: #c7372f;
  --sb-font: "Stolzl", "Avenir Next", "Aptos", system-ui, -apple-system, sans-serif;
  --sb-radius-sm: 9px;
  --sb-radius: 14px;
  --sb-radius-lg: 20px;
  --sb-shadow: 0 10px 35px rgba(7, 58, 89, 0.08);
  --sb-focus: 0 0 0 3px rgba(65, 148, 244, 0.25);
}

html { color-scheme: light; }
body { font-family: var(--sb-font); color: var(--sb-ink); }
button, input, select, textarea { font-family: inherit; }
button, .file-button { transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
button:not(:disabled):active, .file-button:active { transform: translateY(1px); }
button:focus-visible, .file-button:focus-within, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--sb-focus);
}
.brand-accent { height: 4px; background: linear-gradient(90deg, var(--sb-purple) 0 25%, var(--sb-gold) 25% 50%, var(--sb-blue) 50% 75%, var(--sb-mint) 75%); }