/*
 * Theme definitions for SDA.
 *
 * This stylesheet defines CSS variables for both light and dark modes.
 * The variables prefixed with ``--brand-`` correspond to the provided
 * colour palette. Bootstrap's own variables are overridden to
 * harmonise its components with the brand colours.
 */

/* Light theme (default) */
:root {
  /* Modern typography */
  --bs-body-font-family: 'Inter', sans-serif;

  /* Brand palette */
  --brand-1: #4a5568;
  --brand-2: #3182ce;
  --brand-3: #63b3ed;
  --brand-4: #68d391;

  /* Bootstrap overrides */
  --bs-primary: var(--brand-3);
  --bs-secondary: var(--brand-2);
  --bs-warning: var(--brand-4);
  --bs-link-color: var(--brand-3);
  --bs-link-hover-color: var(--brand-2);
}

/* Dark theme */
[data-bs-theme='dark'] {
  /* Lightened brand palette for dark backgrounds */
  --brand-1: #718096;
  --brand-2: #4299e1;
  --brand-3: #9de9ff;
  --brand-4: #48bb78;

  /* Background and text colours */
  --bs-body-bg: #1e2125;
  --bs-body-color: #f1f3f4;
  --bs-tertiary-bg: #25272c;
  --bs-border-color: rgba(255, 255, 255, 0.2);

  /* Bootstrap overrides */
  --bs-primary: var(--brand-3);
  --bs-secondary: var(--brand-2);
  --bs-warning: var(--brand-4);
  --bs-link-color: var(--brand-3);
  --bs-link-hover-color: var(--brand-2);
}