/* PloegPlanner — dark appearance. Loaded after app.css; its media attribute decides when it
   applies (see core/theme.py), so printing always uses the light colours. */

:root {
  color-scheme: dark;

  --bg: #0f1419;
  --surface: #171d24;
  --surface-2: #1f262f;
  --border: #2a323d;
  --border-strong: #3a4450;
  --text: #e6e9ee;
  --muted: #9aa5b3;
  --faint: #6b7684;

  --brand: #2bb5a5;
  --brand-strong: #5fd4c6;
  --brand-soft: #14302d;
  --on-brand: #04211e;

  --danger: #f17070;
  --danger-soft: #3a1c1e;
  --danger-solid: #d93a3a;
  --warning: #f0a54a;
  --warning-soft: #36280f;
  --success: #4cc27a;
  --success-soft: #15301f;
  --info: #6aa6f5;
  --info-soft: #172840;
  --holiday: #b392f0;
  --holiday-soft: #2a2140;
  --event: #6aa6f5;
  --event-soft: #172840;

  --weekend: #1a2028;
  --weekend-head: #262e38;
  /* Soft colours are mixed into the surface, readable text towards white. */
  --tint-base: var(--surface);
  --ink-base: #fff;

  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px rgb(0 0 0 / 40%);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 55%);
}

dialog.modal::backdrop { background: rgb(0 0 0 / 60%); }

/* The colours of roles and events are chosen for a light page: lighter text on dark. */
.role-tag { color: color-mix(in srgb, var(--role) 60%, white); }
.chip { color: color-mix(in srgb, var(--role, var(--brand)) 60%, white); }
.chip:hover, a.badge-event:hover { filter: brightness(1.15); }
.badge-event { color: color-mix(in srgb, var(--day-color, var(--event)) 60%, white); }
.day-event-line { color: color-mix(in srgb, var(--day-color, var(--event)) 65%, white); }
.roster thead th .day-event { color: color-mix(in srgb, var(--day-color, var(--event)) 65%, white); }