/* ==========================================================================
   EHA Design Tokens (Global CSS Variables)
   - Uses Astra global colors when available, but provides solid fallbacks.
   - Palette direction: warm off-white + warm grays + brick/maroon + warm amber
   - Includes “trust” muted blue-gray accent + semantic states.
   ========================================================================== */

:root{
  /* =========================
     Brand + Action Colors
     ========================= */

  /* Primary brand (Brick/Maroon) — use for primary buttons, key CTAs, active nav */
  --eha-primary: var(--ast-global-color-0, #A21B20);
  --eha-on-primary: var(--ast-global-color-5, #FFFFFF); /* text/icon on primary */

  /* Primary brand variants — use for hover/active states */
  --eha-primary-hover: #8A151A;  /* hover bg for primary buttons/links */
  --eha-primary-active: #741113; /* pressed/active bg */

  /* Headings color — deeper maroon for strong hierarchy */
  --eha-heading: #6B0F26; /* H1–H6, section titles */

  /* =========================
     Highlight / Alternative Brand (Warm Amber)
     ========================= */

  /* Accent highlight — use for badges, small highlights, icons, focus outlines */
  --eha-accent: #D48B00;
  --eha-on-accent: #111827; /* readable text on amber fills */
  --eha-accent-hover: #CC8500;

  /* =========================
     Trust Accent (Muted Blue-Gray)
     ========================= */

  /* Optional “trust/info” color — use sparingly for info callouts, policy blocks */
  --eha-trust: #5B7387;
  --eha-on-trust: #FFFFFF;
  --eha-trust-bg: #E8EEF3; /* subtle panel background for info */

  /* =========================
     Surfaces / Backgrounds (Warm Neutrals)
     ========================= */

  /* Main page background (Warm Off-White) */
  --eha-bg: #FAF7F2;

  /* Section background (Light Warm Gray) — use for alternating bands/sections */
  --eha-bg-2: #F0E9E1;

  /* Card/surface background (white) */
  --eha-surface: var(--ast-global-color-5, #FFFFFF);

  /* Subtle background — hover rows, subtle blocks, secondary bands */
  --eha-subtle: #F7F2EB;

  /* =========================
     Typography
     ========================= */

  /* Body text (Charcoal) — main readable text color */
  --eha-text: var(--ast-global-color-2, #1F2933);

  /* Muted text — secondary labels, descriptions, helper text */
  --eha-text-muted: #5B626A;

  /* Link colors — default to brand, keep visited distinct */
  --eha-link: var(--eha-primary);
  --eha-link-hover: #C0242A;
  --eha-link-visited: var(--eha-heading);

  /* =========================
     Borders / Lines / Shadows
     ========================= */

  /* Warm border tone (better with warm backgrounds than neutral gray) */
  --eha-border: #D8CFC4;           /* cards, dividers */
  --eha-border-strong: #CBBFB2;    /* stronger separators when needed */

  /* Elevation */
  --eha-shadow: 0 10px 28px rgba(0,0,0,.12); /* dropdowns, sticky header */
  --eha-shadow-soft: 0 6px 18px rgba(0,0,0,.10); /* cards */

  /* =========================
     Focus / Accessibility
     ========================= */

  /* Keyboard focus ring — amber stands out on warm neutrals */
  --eha-focus: rgba(212, 139, 0, .35); /* outline/shadow tint */

  /* =========================
     Semantic Status Colors
     ========================= */

  /* Success (forms, notices) */
  --eha-success: #1F7A4D;
  --eha-success-bg: #E7F4ED;
  --eha-on-success: #FFFFFF;

  /* Warning */
  --eha-warning: #B85C00;
  --eha-warning-bg: #FFF1E3;
  --eha-on-warning: #111827;

  /* Error */
  --eha-danger: #B3261E;
  --eha-danger-bg: #FDE8E8;
  --eha-on-danger: #FFFFFF;

  /* Info (pairs well with trust accent) */
  --eha-info: var(--eha-trust);
  --eha-info-bg: var(--eha-trust-bg);
  --eha-on-info: var(--eha-on-trust);

  /* =========================
     Motion + Radius
     ========================= */

  --eha-trans: 180ms ease;
  --eha-radius: var(--ast-border-radius, 6px);

  /* =========================
     Header sizing
     ========================= */

  /* Compact sticky header height */
  --eha-compact-h: 56px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.eha-container{
  max-width: var(--ast-container-default, 1200px);
  margin: 0 auto;
  padding: 0 16px;
}

.eha-container--full{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

/* ==========================================================================
   Optional: quick utility hooks (use if helpful in Gutenberg/Blocks)
   ========================================================================== */

/* Background helpers */
.eha-bg{ background: var(--eha-bg); }
.eha-bg-2{ background: var(--eha-bg-2); }
.eha-surface{ background: var(--eha-surface); }

/* Text helpers */
.eha-text{ color: var(--eha-text); }
.eha-muted{ color: var(--eha-text-muted); }
.eha-heading{ color: var(--eha-heading); }
.eha-link a{ color: var(--eha-link); }
.eha-link a:hover{ color: var(--eha-link-hover); }

/* Focus visibility helper (use on custom buttons/inputs if needed) */
.eha-focusable:focus-visible{
  outline: 3px solid var(--eha-focus);
  outline-offset: 2px;
  border-radius: var(--eha-radius);
}