/* =============================================================================
   AA-CHAPEL — Design tokens
   Single source of truth. Surfaces (CSS vars) used everywhere downstream.
   ============================================================================= */

:root {
  /* ---------- Colour ---------- */

  /* Navy — Sea Cadets / nautical depth */
  --aa-navy-900: #081A2E;
  --aa-navy-700: #0E2A47; /* primary brand */
  --aa-navy-500: #1F4068;

  /* Brass / Gold — Sea Cadets insignia, gilded antiques */
  --aa-brass-600: #8C6A36;
  --aa-brass-500: #B08D57; /* primary accent */
  --aa-brass-400: #D4B274;

  /* Stone & Wood — ex-church masonry + pew oak */
  --aa-stone-50:  #FBF8F1;
  --aa-stone-100: #F4EFE6; /* page bg */
  --aa-stone-200: #E5DDD0;
  --aa-stone-400: #B8AC97;
  --aa-walnut-700: #5A3A22;

  /* Functional — black/white dominant per original site palette */
  --aa-ink:        #121212;  /* matches original site charcoal */
  --aa-ink-soft:   #555555;
  --aa-paper:      #FFFFFF;
  --aa-charcoal:   #1F1F1F;  /* dark surfaces (footer, prefooter) */

  /* State */
  --aa-live:    #2F6F4F;
  --aa-warn:    #B08D57;
  --aa-error:   #8B2E2E;
  --aa-success: #2F6F4F;

  /* ---------- Typography ---------- */
  --aa-font-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --aa-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;

  --aa-h1: clamp(2.5rem, 4vw, 3.75rem);
  --aa-h2: clamp(2rem, 3vw, 2.75rem);
  --aa-h3: 1.75rem;
  --aa-h4: 1.25rem;
  --aa-body: 1.0625rem;
  --aa-small: 0.875rem;

  --aa-lh-display: 1.12;
  --aa-lh-body:    1.65;

  /* ---------- Layout ---------- */
  --aa-container:   1200px;
  --aa-container-narrow: 880px;
  --aa-gutter:      clamp(1rem, 3vw, 2rem);
  --aa-radius:      2px;     /* squared edges — masonry, not web-app */
  --aa-radius-soft: 4px;

  /* ---------- Motion ---------- */
  --aa-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --aa-dur:  200ms;

  /* ---------- Elevation ---------- */
  --aa-shadow-sm: 0 1px 2px rgba(8, 26, 46, 0.06), 0 1px 1px rgba(8, 26, 46, 0.04);
  --aa-shadow-md: 0 8px 24px rgba(8, 26, 46, 0.10);
  --aa-shadow-lg: 0 24px 48px rgba(8, 26, 46, 0.16);
}

/* Bridge to Elementor's CSS-var-based palette so any Elementor widget
   referencing primary/secondary/text/accent picks our tokens up. */
:root {
  --e-global-color-primary:    var(--aa-navy-700);
  --e-global-color-secondary:  var(--aa-brass-500);
  --e-global-color-text:       var(--aa-ink);
  --e-global-color-accent:     var(--aa-brass-500);
  --e-global-typography-primary-font-family:   var(--aa-font-display);
  --e-global-typography-secondary-font-family: var(--aa-font-body);
  --e-global-typography-text-font-family:      var(--aa-font-body);
  --e-global-typography-accent-font-family:    var(--aa-font-body);
}