/* Design tokens — aligned with bravovdallasisd.org Wix palette (2026) */
:root,
[data-theme="light"] {
  --color-bg: #f2f2f2;
  --color-surface: #ffffff;
  --color-text: #311603;
  --color-text-secondary: #6b5c52;
  --color-primary: #1247bc;
  --color-primary-hover: #0d3590;
  --color-primary-subtle: #e7edf8;
  --color-accent: #311603;
  --color-border: #d0d0d0;
  --color-header-bg: var(--color-surface);

  --font-size-base: 1.125rem; /* 18px default */
  --font-scale: 1;
  --font-size-body: calc(var(--font-size-base) * var(--font-scale));
  --font-size-sm: calc(0.9375rem * var(--font-scale));
  --font-size-nav: calc(1.0625rem * var(--font-scale));
  --font-size-h1: calc(1.875rem * var(--font-scale));
  --font-size-h2: calc(1.5rem * var(--font-scale));
  --font-size-h3: calc(1.25rem * var(--font-scale));
  --line-height-body: 1.7;

  --font-family-body: "Literata", Georgia, "Times New Roman", serif;
  --font-family-ui: "Source Sans 3", system-ui, -apple-system, sans-serif;

  --sidebar-width: 300px;
  --header-height: 60px;
  --site-main-padding-x: 1.5rem;
  /* Prose + hero share one column; grows with viewport (XL tiers in layout.css) */
  --content-max-width: 56rem;
  /* Horizontal space reserved outside the content column (sidebar + main padding) */
  --content-inline-inset: calc(var(--sidebar-width) + 2 * var(--site-main-padding-x));
  --content-image-max-width: 100%;
  --page-decor-opacity: 0.07;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 3px rgb(18 71 188 / 10%);
}

[data-theme="dark"] {
  --color-bg: #0a1020;
  --color-surface: #141c30;
  --color-text: #e7edf8;
  --color-text-secondary: #b8c8eb;
  --color-primary: #6587d3;
  --color-primary-hover: #b8c8eb;
  --color-primary-subtle: #1a2540;
  --color-accent: #e4ddd8;
  --color-border: #2a3550;
  --color-header-bg: var(--color-surface);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 35%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--header-height);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}