Dark Mode UI

/* via superdesign.dev/styles/dark-mode */

:root {
  /* Declare both schemes so the browser styles form controls,
     scrollbars and the canvas correctly */
  color-scheme: light dark;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* SURFACES: never pure black. Elevation = lighter, not shadowed.
     Each tier steps up roughly 4-6% in lightness. */
  --surface-0: #121212;  /* page background (Material Design's dark baseline) */
  --surface-1: #1e1e1e;  /* cards, raised panels */
  --surface-2: #2a2a2a;  /* dropdowns, sticky headers */
  --surface-3: #333333;  /* tooltips, popovers, highest elevation */

  /* TEXT: off-white, never #ffffff (pure white on dark causes halation) */
  --text-primary: #e6e6e6;    /* 15.0:1 on #121212, passes AAA */
  --text-secondary: #a3a3a3;  /* 7.4:1 on #121212, passes AA and AAA */
  --text-disabled: #6b6b6b;   /* 3.5:1, below the 4.5:1 AA body-text bar
                                 on purpose; never use for real content */

  /* ACCENTS: desaturated versions of your light-mode brand colors.
     Take your 500-weight color and use its 300-400 weight instead. */
  --accent: #8ab4f8;          /* desaturated blue, 8.9:1 on #121212 */
  --accent-pressed: #aecbfa;
  --danger: #f28b82;          /* desaturated red, 7.8:1 on #121212 */

  /* BORDERS: low-alpha white reads cleaner than solid gray on dark */
  --border: rgba(255, 255, 255, 0.12);

  /* SHADOWS barely register on dark backgrounds; always pair a shadow
     with a lighter surface tier */
  --shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Respect the OS preference when the user has not chosen a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #121212;
    --surface-1: #1e1e1e;
    --surface-2: #2a2a2a;
    --surface-3: #333333;
    --text-primary: #e6e6e6;
    --text-secondary: #a3a3a3;
    --text-disabled: #6b6b6b;
    --accent: #8ab4f8;
    --accent-pressed: #aecbfa;
    --danger: #f28b82;
    --border: rgba(255, 255, 255, 0.12);
    --shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

body {
  background: var(--surface-0);
  color: var(--text-primary);
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-raised);
}