:root {
  --color-primary: #111827;
  --color-primary-hover: #1f2937;
  --color-secondary: #6b7280;
  --color-secondary-hover: #4b5563;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-surface: #f9fafb;
  --color-background: #ffffff;
  --color-border: #e5e7eb;
  --font-heading: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

:root {
  --color-primary: #032044;
  --color-primary-hover: #06305f;
  --color-secondary: #f15a22;
  --color-secondary-hover: #d3430d;
  --color-accent: #265bf7;
  --color-accent-hover: #1a45c9;
  --color-text: #212529;
  --color-text-muted: #495970;
  --color-surface: #ffffff;
  --color-background: #f3f3f3;
  --color-border: #dce0e6;
  --font-heading: Arsenal, "Libre Franklin", system-ui, sans-serif;
  --font-body: "Libre Franklin", system-ui, sans-serif;
  --space-lg: 1.75rem;
  --space-xl: 2.75rem;
  --space-2xl: 4.5rem;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;
}

/* UT San Antonio VIED demo theme
 * Palette sampled from UTSA's own WordPress theme (arts.utsa.edu computed styles),
 * not eyeballed, so the demo reads as genuinely on-brand next to their live sites.
 */

:root,
.wpc-theme-utsa {
  --color-navy: #032044;
  --color-navy-deep: #02152e;
  --color-navy-mid: #06305f;
  --color-slate: #495970;

  --color-blue: #265bf7;
  --color-blue-deep: #1a45c9;
  --color-blue-tint: #dbe8ff;
  --color-blue-tint-soft: #e9f1ff;
  --color-blue-pale: #c8dcff;

  --color-orange: #f15a22;
  --color-orange-hot: #f55600;
  --color-orange-deep: #d3430d;
  --color-orange-tint: #fdece4;

  --color-grey-100: #f8f9fa;
  --color-grey-200: #f3f3f3;
  --color-grey-300: #edeff2;
  --color-grey-400: #dce0e6;

  --shadow-sm: 0 1px 2px rgba(3, 32, 68, .08);
  --shadow-md: 0 6px 20px rgba(3, 32, 68, .10);
  --shadow-lg: 0 18px 48px rgba(3, 32, 68, .16);

  --ring: 0 0 0 3px #ffffff, 0 0 0 6px var(--color-blue);
  --shell: 1240px;
}

/* ---------- base ---------- */

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Keyboard focus is visible everywhere, including over navy blocks. WCAG 2.1 AA 2.4.7. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 3px;
}

/* ---------- accessibility toolbar state ----------
 * The toolbar writes attributes onto , so a preference set in the header
 * restyles every widget on the page without each widget knowing about it.
 */

/* The widget CSS sizes type in px, so scaling the root font-size alone moves
   nothing. Zooming each client-site block scales the px values themselves and
   reflows rather than overflowing. The Amplus demo bar and the tour are excluded
   because they are demo chrome, not part of the site being previewed. */
html[data-utsa-text="lg"] body { font-size: 112.5%; }
html[data-utsa-text="xl"] body { font-size: 125%; }

html[data-utsa-text="lg"] .wpc-gutenberg-block:not(.wpc-widget-utsa_demobar):not(.wpc-widget-utsa_tour) {
  zoom: 1.10;
}

html[data-utsa-text="xl"] .wpc-gutenberg-block:not(.wpc-widget-utsa_demobar):not(.wpc-widget-utsa_tour) {
  zoom: 1.22;
}

html[data-utsa-contrast="1"] {
  --color-text: #000000;
  --color-text-muted: #1b2635;
  --color-border: #000000;
  --color-background: #ffffff;
  --color-navy: #00152f;
  --color-navy-deep: #000c1c;
  --color-slate: #16233a;
  --color-blue: #0033cc;
  --color-blue-deep: #00218a;
  --color-orange-deep: #a32e00;
}

html[data-utsa-contrast="1"] .utsa-shell :is(p, li, span, a, dd, dt) {
  text-shadow: none;
}

html[data-utsa-motion="0"] *,
html[data-utsa-motion="0"] *::before,
html[data-utsa-motion="0"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-blocked: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-blocked: auto !important;
  }
}

/* ---------- shared layout helpers ---------- */

.utsa-shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
}

.utsa-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-orange-deep);
  margin: 0;
}

.utsa-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--color-navy);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
}

.utsa-skip:focus {
  left: 0;
}

/* Demo-only notice for links that intentionally go nowhere. */
.utsa-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(14px);
  z-index: 999999;
  max-width: min(92vw, 560px);
  padding: 13px 20px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.utsa-toast[data-on="1"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.utsa-toast b {
  color: #ffc7ad;
  font-weight: 700;
}