/*
  FILE ROLE: THEME TOKENS ONLY

  Keep this file limited to:
  - font imports
  - CSS custom properties in :root
  - site-wide design tokens such as colors, type, spacing, and max widths
  - the canonical global variables layer for the public site

  Keep the filename as `theme.css` unless the PHP loaders and theme editor are
  updated too. The current toolchain expects this exact path.

  Do not place component selectors here.
  Component styling belongs in:
  - defaults.css for reusable CMS-wide primitives
  - style.css for site-specific component styling
  - desktop.css / mobile.css for responsive overrides
*/

/* Font Sources */
@import url("https://fonts.googleapis.com/css2?family=League+Gothic&family=Public+Sans:wght@400;500;600;700;800&display=swap");

/* Site Tokens */
:root,
::after,
::before {
  --mr-color-background: #f5f5f5;
  --paper: #f4efe4;
  --mr-color-text: #111111;
  --mr-color-primary: #111111;
  --mr-color-primary-tint: #404040;
  --mr-color-primary-shade: #5b4d45;
  --mr-color-primary-murky: #111111bf;
  --mr-color-primary-hazy: #1111111a;
  --mr-color-primary-contrast: #ffffff;
  --mr-color-secondary: #c7c7c7;
  --mr-color-secondary-tint: #e0e0e0;
  --mr-color-secondary-shade: #9b9b9b;
  --mr-color-secondary-murky: #c7c7c7cc;
  --mr-color-secondary-hazy: #c7c7c726;
  --mr-color-secondary-contrast: #111111;
  --mr-color-tertiary: #a6a6a6;
  --mr-color-tertiary-tint: #d3d3d3;
  --mr-color-tertiary-shade: #7c7c7c;
  --mr-color-tertiary-murky: #a6a6a6bf;
  --mr-color-tertiary-hazy: #a6a6a626;
  --mr-color-tertiary-contrast: #111111;
  --mr-color-quaternary: #ededed;
  --mr-color-quaternary-tint: #f7f7f7;
  --mr-color-quaternary-shade: #cfcfcf;
  --mr-color-quaternary-murky: #edededbf;
  --mr-color-quaternary-hazy: #ededed26;
  --mr-color-quaternary-contrast: #111111;
  --mr-color-accent: var(--mr-color-primary);
  --mr-color-accent-tint: var(--mr-color-primary-tint);
  --mr-color-accent-shade: var(--mr-color-primary-shade);
  --mr-color-accent-murky: var(--mr-color-primary-murky);
  --mr-color-accent-hazy: var(--mr-color-primary-hazy);
  --mr-color-accent-contrast: var(--mr-color-primary-contrast);
  --mr-color-contrast: #0f172a;
  --mr-color-surface: #ffffff;
  --mr-color-light: #fafafa;
  --mr-color-medium: #6f6f6f;
  --mr-color-dark: #241d1a;
  --mr-color-heading-dark: var(--mr-color-dark);
  --mr-color-heading-light: #fff7eb;
  --mr-color-body-dark: var(--mr-color-medium);
  --mr-color-body-light: rgba(255, 243, 226, 0.92);
  --mr-color-eyebrow-dark: var(--mr-color-primary-shade);
  --mr-color-eyebrow-light: rgba(255, 235, 198, 0.96);
  --mr-color-link-dark: var(--mr-color-text);
  --mr-color-link-light: var(--mr-color-heading-light);
  --mr-color-form-border: #d0d0d0;
  --mr-color-green: #15803d;
  --mr-color-yellow: #ca8a04;
  --mr-color-red: #b91c1c;
  --mr-font-main: "Public Sans", "Segoe UI", Arial, sans-serif;
  --mr-font-heading: "League Gothic", Impact, sans-serif;
  --mr-font-accent: "Public Sans", "Segoe UI", Arial, sans-serif;
  --mr-body-font-size: clamp(16px, 1.1vw, 19px);
  --mr-padding-page: clamp(1.25rem, 3vw, 2.75rem);
  --mr-box-shadow: 0 18px 44px rgba(63, 79, 53, 0.12);
  --shell-max: 1180px;
  --mr-content-max: var(--shell-max);
  --mr-space-0: 0;
  --mr-space-1: 0.25rem;
  --mr-space-2: 0.5rem;
  --mr-space-3: 0.75rem;
  --mr-space-4: 1rem;
  --mr-space-5: 1.5rem;
  --mr-space-6: 2rem;
  --mr-space-7: 3rem;
  --mr-space-8: 4rem;
  --mr-gap-xs: var(--mr-space-2);
  --mr-gap-sm: var(--mr-space-3);
  --mr-gap-md: var(--mr-space-4);
  --mr-gap-lg: var(--mr-space-5);
  --mr-gap-xl: var(--mr-space-6);
  --mr-section-space-y: clamp(3rem, 6vw, 5.5rem);
  --mr-section-space-y-tight: clamp(2rem, 4vw, 3.25rem);
  --mr-section-space-y-loose: clamp(4rem, 8vw, 7rem);
  --mr-section-space-x: var(--mr-padding-page);
  --mr-radius-xs: 0.25rem;
  --mr-radius-sm: 0.5rem;
  --mr-radius-md: 0.75rem;
  --mr-radius-lg: 1rem;
  --mr-radius-xl: 1.5rem;
  --mr-radius-2xl: 2rem;
  --mr-radius-round: 999px;
  --mr-radius-pill: 999px;
  --mr-shadow-xs: 0 1px 3px color-mix(in srgb, var(--mr-color-text) 8%, transparent);
  --mr-shadow-sm: 0 4px 12px color-mix(in srgb, var(--mr-color-text) 8%, transparent);
  --mr-shadow-md: 0 8px 20px color-mix(in srgb, var(--mr-color-text) 10%, transparent);
  --mr-shadow-lg: var(--mr-box-shadow);
  --mr-border-subtle: 1px solid color-mix(in srgb, var(--mr-color-text) 8%, transparent);
  --mr-border-default: 1px solid color-mix(in srgb, var(--mr-color-text) 12%, transparent);
  --mr-border-strong: 1px solid color-mix(in srgb, var(--mr-color-primary) 20%, transparent);
  --mr-surface-base: var(--mr-color-surface);
  --mr-surface-soft: color-mix(in srgb, var(--mr-color-tertiary) 8%, #fff);
  --mr-surface-muted: color-mix(in srgb, var(--mr-color-background) 74%, #fff);
  --mr-surface-raised: var(--mr-surface-base);
  --mr-surface-overlay: rgba(255, 255, 255, 0.78);
  --mr-text-muted: color-mix(in srgb, var(--mr-color-text) 68%, #fff);
  --mr-text-soft: color-mix(in srgb, var(--mr-color-text) 54%, #fff);
  --mr-link-color: var(--mr-color-link-dark);
  --mr-link-hover-color: var(--mr-color-accent);
  --mr-header-height: 5.25rem;
  --mr-header-offset: 3.5rem;
  --mr-toolbar-height: 3rem;
  --mr-top-stripe-height: 0.4rem;
  --mr-mobile-drawer-top: 3.75rem;
  --mr-nav-panel-width: min(21.5rem, calc(100vw - 3rem));
  --mr-nav-panel-width-legacy: 250px;
  --mr-nav-item-min-height: 3rem;
  --mr-nav-item-radius: var(--mr-radius-lg);
  --mr-nav-item-padding-x: 1rem;
  --mr-nav-item-padding-y: 0.85rem;
  --mr-nav-drawer-radius: 0 1.6rem 1.6rem 0;
  --mr-nav-drawer-surface: var(--mr-surface-base);
  --mr-nav-drawer-shadow: 0 8px 24px color-mix(in srgb, var(--mr-color-text) 12%, transparent);
  --mr-control-height-sm: 2.5rem;
  --mr-control-height-md: 3rem;
  --mr-control-height-lg: 3.35rem;
  --mr-control-padding-x: 0.9rem;
  --mr-control-padding-y: 0.7rem;
  --mr-control-radius: var(--mr-radius-md);
  --mr-control-border: color-mix(in srgb, var(--mr-color-text) 16%, transparent);
  --mr-control-border-focus: color-mix(in srgb, var(--mr-color-primary) 42%, transparent);
  --mr-control-surface: rgba(255, 255, 255, 0.94);
  --mr-control-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--mr-color-primary) 12%, transparent);
  --mr-button-radius: var(--mr-radius-pill);
  --mr-button-padding-x: 1.12rem;
  --mr-button-padding-y: 0.67rem;
  --mr-button-shadow: var(--mr-shadow-sm);
  --mr-button-shadow-hover: 0 10px 18px color-mix(in srgb, var(--mr-color-text) 12%, transparent);
  --mr-button-font-weight: 700;
  --mr-card-radius: var(--mr-radius-xl);
  --mr-card-padding: clamp(1rem, 2vw, 1.5rem);
  --mr-card-border: var(--mr-border-default);
  --mr-card-shadow: var(--mr-shadow-md);
  --mr-card-surface: var(--mr-surface-raised);
  --mr-card-surface-soft: color-mix(in srgb, var(--mr-color-background) 82%, #fff);
  --mr-badge-radius: var(--mr-radius-pill);
  --mr-badge-padding-y: 0.2rem;
  --mr-badge-padding-x: 0.6rem;
  --mr-badge-surface: color-mix(in srgb, var(--mr-color-tertiary) 16%, #fff);
  --mr-badge-text: var(--mr-color-text);
  --mr-panel-radius: var(--mr-radius-xl);
  --mr-panel-padding: clamp(1rem, 2vw, 1.4rem);
  --mr-panel-border: var(--mr-border-default);
  --mr-panel-shadow: var(--mr-shadow-md);
  --mr-panel-surface: var(--mr-surface-raised);
  --mr-widget-text-color: var(--mr-color-text);
  --mr-widget-text-color-dark: var(--mr-color-body-dark);
  --mr-widget-text-color-light: var(--mr-color-body-light);
  --mr-widget-heading-color: var(--mr-color-dark);
  --mr-widget-heading-color-dark: var(--mr-color-heading-dark);
  --mr-widget-heading-color-light: var(--mr-color-heading-light);
  --mr-widget-heading-border-color: var(--mr-color-primary);
  --mr-widget-eyebrow-color: var(--mr-color-eyebrow-dark);
  --mr-widget-eyebrow-color-dark: var(--mr-color-eyebrow-dark);
  --mr-widget-eyebrow-color-light: var(--mr-color-eyebrow-light);
  --mr-widget-link-color: var(--mr-color-primary);
  --mr-widget-link-color-dark: var(--mr-color-link-dark);
  --mr-widget-link-color-light: var(--mr-color-link-light);
  --mr-widget-link-hover-color: var(--mr-color-primary-shade);
  --mr-widget-subtle-color: color-mix(in srgb, var(--mr-color-text) 72%, #fff);
  --mr-widget-muted-color: color-mix(in srgb, var(--mr-color-text) 60%, #fff);
  --mr-widget-strong-text-color: color-mix(in srgb, var(--mr-color-text) 84%, #fff);
  --mr-widget-surface: #fff;
  --mr-widget-surface-soft: linear-gradient(180deg, #fff, color-mix(in srgb, var(--mr-color-tertiary) 8%, #fff));
  --mr-widget-surface-strong: linear-gradient(135deg, color-mix(in srgb, var(--mr-color-tertiary) 10%, #fff), #fff);
  --mr-widget-surface-accent: color-mix(in srgb, var(--mr-color-tertiary) 12%, #fff);
  --mr-widget-border-color: color-mix(in srgb, var(--mr-color-text) 10%, transparent);
  --mr-widget-border-strong: color-mix(in srgb, var(--mr-color-primary) 24%, transparent);
  --mr-widget-shadow: 0 10px 22px color-mix(in srgb, var(--mr-color-text) 8%, transparent);
  --mr-widget-shadow-soft: 0 8px 16px color-mix(in srgb, var(--mr-color-text) 8%, transparent);
  --mr-widget-highlight-surface: color-mix(in srgb, var(--mr-color-secondary) 18%, #fff);
  --mr-widget-highlight-border: color-mix(in srgb, var(--mr-color-primary) 24%, transparent);
  --mr-widget-highlight-color: var(--mr-color-primary-shade);
  --mr-widget-icon-surface: color-mix(in srgb, var(--mr-color-tertiary) 20%, #fff);
  --mr-widget-icon-color: var(--mr-color-primary);
  --mr-widget-map-surface: linear-gradient(135deg, color-mix(in srgb, var(--mr-color-tertiary) 22%, #fff), color-mix(in srgb, var(--mr-color-primary) 18%, #fff));
  --mr-widget-map-link-surface: rgba(255, 255, 255, 0.95);
  --mr-widget-map-link-border: color-mix(in srgb, var(--mr-color-text) 14%, transparent);
  --mr-widget-map-link-color: var(--mr-color-dark);
  --mr-widget-map-fallback-color: color-mix(in srgb, var(--mr-color-text) 60%, #fff);
  --mr-widget-callout-surface: linear-gradient(100deg, color-mix(in srgb, var(--mr-color-primary) 14%, #fff), color-mix(in srgb, var(--mr-color-tertiary) 10%, #fff), color-mix(in srgb, #f59e0b82 12%, #fff));
  --mr-widget-callout-border: color-mix(in srgb, var(--mr-color-primary) 24%, transparent);
  --mr-widget-contrast-surface: linear-gradient(135deg, #0f172a 0%, #0f766e 100%);
  --mr-widget-contrast-text: #fff;
  --mr-widget-contrast-muted: rgba(255, 255, 255, 0.9);
  --mr-widget-inverse-surface: rgba(255, 255, 255, 0.12);
  --mr-widget-inverse-border: rgba(255, 255, 255, 0.22);
  --mr-widget-inverse-text: #fff;
  --mr-widget-inverse-muted: rgba(255, 255, 255, 0.76);
  --mr-widget-info-sky-surface: linear-gradient(135deg, #dff3ff 0%, #f3fbff 55%, #ffffff 100%);
  --mr-widget-info-sky-border: color-mix(in srgb, var(--mr-color-tertiary) 52%, #ffffff);
  --mr-widget-info-sun-surface: linear-gradient(135deg, #fff0bf 0%, #fff7dd 55%, #ffffff 100%);
  --mr-widget-info-sun-border: color-mix(in srgb, var(--mr-color-secondary) 52%, #ffffff);
  --mr-widget-info-berry-surface: linear-gradient(135deg, #ffe0e7 0%, #fff2f5 55%, #ffffff 100%);
  --mr-widget-info-berry-border: color-mix(in srgb, var(--mr-color-quaternary) 52%, #ffffff);
  --mr-widget-info-sky-icon-color: rgb(15 118 110 / 1);
  --mr-widget-info-sky-icon-surface: rgb(56 189 248 / 0.4);
  --mr-widget-info-sun-icon-color: rgb(245 158 11 / 1);
  --mr-widget-info-sun-icon-surface: rgb(245 158 11 / 0.4);
  --mr-widget-info-berry-icon-color: rgb(239 68 68 / 1);
  --mr-widget-info-berry-icon-surface: rgb(239 68 68 / 0.4);
}