/* Dark theme: redefines the color variables of app.css.
 * Loaded for the "dark" theme, and for "system" when the device is in dark mode.
 * Copy this file to start a new theme (see src/theme.rs). */
:root {
  color-scheme: dark;
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c222b;
  --surface-3: #262d37;
  --text: #e6edf3;
  --muted: #9aa5b1;
  --faint: #6b7683;
  --border: #2b323c;
  --border-strong: #3a424e;
  --primary: #8b8cf8;
  --primary-hover: #a5a6fb;
  --primary-soft: #23244a;
  --on-primary: #0d1117;
  --focus: #a5a6fb;
  --danger: #ff8a80;
  --danger-bg: #3a1716;
  --danger-border: #6b2a26;
  --success: #6ee7a8;
  --success-bg: #12301f;
  --warning: #fbbf6a;
  --warning-bg: #36260f;
  --info: #8ab8ff;
  --info-bg: #142a4a;
  --viz-1: #5b9bea;
  --viz-prior: #59636f;
  --viz-2: #f08a5d;
  --event-1-bg: #172538;
  --event-2-bg: #36211a;
  --viz-3: #3cc8b4;
  --event-3-bg: #10302c;
  --track: #262d37;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
}

/* The logo's black lettering would disappear: use the light-text version. */
.logo-on-light { display: none; }
.logo-on-dark { display: block; }

/* Illustrations and the editor's toolbar icons were drawn for light pages. */
.empty img, .avatar-sm, .avatar-lg, .avatar-xs, .profile > img { filter: brightness(.9); }
trix-toolbar .trix-button { background: var(--surface-2); border-color: var(--border) !important; }
trix-toolbar .trix-button::before { filter: invert(.85); }
trix-toolbar .trix-button.trix-active { background: var(--primary-soft); }
trix-toolbar .trix-button-group { border-color: var(--border) !important; }
trix-editor a { color: var(--primary); }

/* The marketing logo has a white background and black lettering: on a light card. */
.hero-logo { background: #fff; border-radius: 16px; padding: .5rem 1rem; margin-left: 0; }