:root {
  /* Brand */
  --color-brand: #0a5688;
  --color-brand-hover: #08456b;
  --color-grey: #69767e;

  /* Neutral / surfaces */
  --bg: #f9f9f9;
  --bg-muted: #e9ebee;
  --text: #1e293b;
  --text-muted: #475569;
  --border: #e2e8f0;

  /* Others */
  --radius: 1rem;
  --shadow-1: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}

/* Dark theme overrides */
:root[data-theme="dark"] {
  --bg: #0f172a;
  --bg-muted: #1e293b;
  --text: #f1f5f9;
  --text-muted: #cbd5e1;
  --border: #334155;

  /* Adjust brand slightly for contrast */
  --color-brand: #2b7cb5;
  --color-brand-hover: #25628f;
}