/* Entry stylesheet. Component/page CSS is imported here; @import must stay above all other rules. */
@import url('/css/components/topbar.css');
@import url('/css/pages/about.css');

/* Theme tokens - see theme.md. Verify --bs-* names against vendor/bootstrap.min.css. */
:root,
[data-bs-theme="dark"] {
  /* Brand tokens */
  --sg-primary: #2398a0;
  --sg-accent: #fcb94c;
  --sg-danger: #f0585d;
  --sg-bg: #303030;
  --sg-bg-highlight: #212121;
  --sg-fg: #e6e6e6;
  --sg-fg-on-color: #212121;
  --sg-font: Arial, Helvetica, sans-serif;

  /* Body & surfaces */
  --bs-bg-body: var(--sg-bg);
  --bs-bg-1: var(--sg-bg-highlight);
  --bs-fg-body: var(--sg-fg);
  --bs-border-body: color-mix(in oklch, var(--sg-fg) 20%, var(--sg-bg));
  --bs-body-font-family: var(--sg-font);

  /* Primary */
  --bs-primary-base: var(--sg-primary);
  --bs-primary-bg: var(--sg-primary);
  --bs-primary-fg: color-mix(in oklch, var(--sg-primary) 70%, white);
  --bs-primary-fg-emphasis: color-mix(in oklch, var(--sg-primary) 45%, white);
  --bs-primary-bg-subtle: color-mix(in oklch, var(--sg-primary) 20%, var(--sg-bg));
  --bs-primary-bg-muted: color-mix(in oklch, var(--sg-primary) 35%, var(--sg-bg));
  --bs-primary-border: color-mix(in oklch, var(--sg-primary) 60%, var(--sg-bg));
  --bs-primary-focus-ring: color-mix(in oklch, var(--sg-primary) 50%, var(--sg-bg));
  --bs-primary-contrast: var(--sg-fg-on-color);

  /* Accent */
  --bs-accent-base: var(--sg-accent);
  --bs-accent-bg: var(--sg-accent);
  --bs-accent-fg: var(--sg-accent);
  --bs-accent-fg-emphasis: color-mix(in oklch, var(--sg-accent) 60%, white);
  --bs-accent-bg-subtle: color-mix(in oklch, var(--sg-accent) 20%, var(--sg-bg));
  --bs-accent-bg-muted: color-mix(in oklch, var(--sg-accent) 35%, var(--sg-bg));
  --bs-accent-border: color-mix(in oklch, var(--sg-accent) 60%, var(--sg-bg));
  --bs-accent-focus-ring: color-mix(in oklch, var(--sg-accent) 50%, var(--sg-bg));
  --bs-accent-contrast: var(--sg-fg-on-color);

  /* Danger */
  --bs-danger-base: var(--sg-danger);
  --bs-danger-bg: var(--sg-danger);
  --bs-danger-fg: color-mix(in oklch, var(--sg-danger) 75%, white);
  --bs-danger-fg-emphasis: color-mix(in oklch, var(--sg-danger) 50%, white);
  --bs-danger-bg-subtle: color-mix(in oklch, var(--sg-danger) 20%, var(--sg-bg));
  --bs-danger-bg-muted: color-mix(in oklch, var(--sg-danger) 35%, var(--sg-bg));
  --bs-danger-border: color-mix(in oklch, var(--sg-danger) 60%, var(--sg-bg));
  --bs-danger-focus-ring: color-mix(in oklch, var(--sg-danger) 50%, var(--sg-bg));
  --bs-danger-contrast: var(--sg-fg-on-color);
}

/* Bootstrap reserves room for the window scrollbar, but only <main> scrolls (see ui.md),
   so the reserved strip would show as a gap to the right of the topbar. */
:root {
  scrollbar-gutter: auto;
}

/* Headings and <main> get focus only from code (router, skip link) so screen readers land there.
   They are not interactive, so a focus ring on them would just look like a stray box. */
h1[tabindex="-1"]:focus,
main[tabindex="-1"]:focus {
  outline: none;
}

/* Links styled as filled buttons use white text (design choice, see theme.md - Rules).
   Bootstrap derives the normal, hover and active text colors from this one token. */
a.btn-solid {
  --bs-theme-contrast: var(--bs-white);
}