/* Brian English · global semantic color system.
   Light remains the default. Dark uses a warm Midnight Material palette rather
   than inverting/blackening route artwork. */
:root {
  color-scheme: light;
  --bes-theme-page: #f7f9fc;
  --bes-theme-page-soft: #eef3f8;
  --bes-theme-surface: #ffffff;
  --bes-theme-surface-low: #f8fafd;
  --bes-theme-surface-mid: #f1f3f4;
  --bes-theme-surface-high: #e8eaed;
  --bes-theme-text: #1f1f1f;
  --bes-theme-text-soft: #3c4043;
  --bes-theme-text-muted: #5f6368;
  --bes-theme-border: #dadce0;
  --bes-theme-divider: #e3e7eb;
  --bes-theme-primary: #0b57d0;
  --bes-theme-primary-hover: #0842a0;
  --bes-theme-on-primary: #ffffff;
  --bes-theme-primary-container: #d3e3fd;
  --bes-theme-on-primary-container: #041e49;
  --bes-theme-positive: #137333;
  --bes-theme-positive-container: #e6f4ea;
  --bes-theme-warning: #8e4e00;
  --bes-theme-warning-container: #fef7e0;
  --bes-theme-danger: #b3261e;
  --bes-theme-danger-container: #fce8e6;
  --bes-theme-scrim: rgba(32, 33, 36, .34);
  --bes-theme-shadow-1: 0 1px 2px rgba(60, 64, 67, .12);
  --bes-theme-shadow-2: 0 8px 28px rgba(60, 64, 67, .15), 0 2px 8px rgba(60, 64, 67, .08);
  --bes-page-bg: var(--bes-theme-page);
  --bes-surface: var(--bes-theme-surface);
  --bes-surface-elevated: var(--bes-theme-surface);
  --bes-ink: var(--bes-theme-text);
  --bes-muted: var(--bes-theme-text-muted);
  --bes-border: var(--bes-theme-border);
  --brian-nav-surface: var(--bes-theme-surface);
  --brian-nav-soft: var(--bes-theme-surface-mid);
  --brian-nav-ink: var(--bes-theme-text);
  --brian-nav-muted: var(--bes-theme-text-muted);
  --brian-nav-line: var(--bes-theme-border);
  --brian-nav-accent: var(--bes-theme-primary);
}

html[data-theme='dark'],
html[data-bes-theme='dark'],
html.theme-dark {
  color-scheme: dark;

  /* Midnight Material: warm graphite, not pure black / blue-black. */
  --bes-theme-page: #151719;
  --bes-theme-page-soft: #191c1f;
  --bes-theme-surface: #202428;
  --bes-theme-surface-low: #1b1f22;
  --bes-theme-surface-mid: #272c31;
  --bes-theme-surface-high: #30363c;
  --bes-theme-text: #f3f0eb;
  --bes-theme-text-soft: #d8d4ce;
  --bes-theme-text-muted: #a49f98;
  --bes-theme-border: #3b4147;
  --bes-theme-divider: #31363b;

  /* Calm, slightly desaturated accents survive long reading sessions. */
  --bes-theme-primary: #9ab7e8;
  --bes-theme-primary-hover: #b8cbed;
  --bes-theme-on-primary: #17273b;
  --bes-theme-primary-container: #2b394b;
  --bes-theme-on-primary-container: #e0e9f7;
  --bes-theme-positive: #8fc5a0;
  --bes-theme-positive-container: #263a2d;
  --bes-theme-warning: #dfb873;
  --bes-theme-warning-container: #463922;
  --bes-theme-danger: #e99f99;
  --bes-theme-danger-container: #472d2d;

  --bes-theme-scrim: rgba(7, 8, 9, .58);
  --bes-theme-shadow-1: 0 1px 2px rgba(0, 0, 0, .25);
  --bes-theme-shadow-2: 0 14px 38px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .18);

  --bes-page-bg: var(--bes-theme-page);
  --bes-surface: var(--bes-theme-surface);
  --bes-surface-elevated: #252a2f;
  --bes-ink: var(--bes-theme-text);
  --bes-muted: var(--bes-theme-text-muted);
  --bes-border: var(--bes-theme-border);
  --brian-nav-surface: #1d2125;
  --brian-nav-soft: #272c31;
  --brian-nav-ink: var(--bes-theme-text);
  --brian-nav-muted: var(--bes-theme-text-muted);
  --brian-nav-line: var(--bes-theme-border);
  --brian-nav-accent: var(--bes-theme-primary);
}

html,
body,
#root,
.app-shell,
.metro-shell,
.wp8-page-stage {
  background-color: var(--bes-theme-page);
  color: var(--bes-theme-text);
}

body,
button,
input,
select,
textarea {
  color-scheme: inherit;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bes-theme-primary) 42%, transparent) !important;
  outline-offset: 2px !important;
}

html {
  scrollbar-color: color-mix(in srgb, var(--bes-theme-text-muted) 58%, transparent) var(--bes-theme-page);
}

::-webkit-scrollbar-track {
  background: var(--bes-theme-page);
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--bes-theme-page);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bes-theme-text-muted) 58%, transparent);
}

@media print {
  :root,
  html[data-theme='dark'],
  html[data-bes-theme='dark'] {
    color-scheme: light !important;
    --bes-theme-page: #fff !important;
    --bes-theme-surface: #fff !important;
    --bes-theme-text: #000 !important;
    --bes-theme-text-muted: #444 !important;
    --bes-theme-border: #bbb !important;
  }
}