/* ==========================================================================
   Light Generation Ministry — Design Tokens
   Location: assets/css/variables.css
   Single source of truth for color, type, spacing, radius, shadow, and
   motion values. Every component in assets/css/main.css reads from here.

   v2 site-wide redesign: Ancient Red / royal-blue / gold palette, Inter
   throughout for typography (no condensed/display fonts), 140px section
   rhythm. header.css and footer.css keep their own small set of scoped
   tokens (a link blue, a slightly different header bg/accent) where
   they were pixel-matched against separate reference screenshots —
   those are intentional, documented exceptions layered on this system.
   ========================================================================== */

:root {
  /* Brand colors */
  --lgm-ancient-red: #6B1E1E;        /* deep oxblood — structural/dark role */
  --lgm-ancient-red-bright: #A8382E; /* brighter red — CTA/accent role */
  --lgm-ancient-red-hover: #8A2A22;  /* darker red — CTA hover state */
  --lgm-royal-blue: #1B4E7D;
  --lgm-gold: #D4AF37;
  --lgm-white: #FFFFFF;
  --lgm-off-white: #F8FAFC;
  --lgm-light-gray: #EEF2F6;
  --lgm-border: #E5E7EB;
  --lgm-red: #C62828;

  /* Legacy names, kept as aliases so every existing reference in
     main.css (buttons, section labels, shadows, etc.) automatically
     picks up Ancient Red without touching each rule. Navy and Orange,
     as literal colors, no longer appear anywhere in this system —
     write new CSS against --lgm-ancient-red* directly. */
  --lgm-navy: var(--lgm-ancient-red);
  --lgm-orange: var(--lgm-ancient-red-bright);
  --lgm-orange-hover: var(--lgm-ancient-red-hover);
  --lgm-dark-blue: var(--lgm-navy);
  --lgm-light-blue: var(--lgm-off-white);
  --lgm-light-grey: var(--lgm-light-gray);
  --lgm-medium-grey: #8A94A6;
  --lgm-dark-grey: #4B5563;

  /* Typography — Inter throughout, headings included. No condensed or
     display fonts (Bebas Neue, Oswald, Anton, etc.) anywhere. Headings
     use a dedicated neutral charcoal rather than the brand red, so the
     accent color stays reserved for CTAs/labels, not body copy. */
  --lgm-font-heading: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --lgm-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --lgm-heading-color: #2F3A45;

  --lgm-heading-size: clamp(2.625rem, 5vw + 1rem, 4.5rem); /* 42px \u2192 72px */
  --lgm-body-size: 1.125rem; /* 18px */
  --lgm-body-line-height: 1.8;
  --lgm-label-letter-spacing: 4px;

  /* Spacing scale */
  --lgm-space-xs: 8px;
  --lgm-space-sm: 16px;
  --lgm-space-md: 24px;
  --lgm-space-lg: 40px;
  --lgm-space-xl: 64px;
  --lgm-space-2xl: 96px;

  /* Section rhythm (v2 redesign) */
  --lgm-section-padding: 140px;
  --lgm-cta-padding: 48px; /* slimmed further per final UI refinements — CTA banners only */
  --lgm-section-gap: 120px;
  --lgm-text-width: 700px;

  /* Radius */
  --lgm-radius-sm: 6px;
  --lgm-radius-md: 12px;
  --lgm-radius-lg: 20px;
  --lgm-radius-card: 24px;
  --lgm-radius-pill: 999px;

  /* Shadows — soft, premium, never heavy */
  --lgm-shadow-sm: 0 2px 8px rgba(107, 30, 30, 0.08);
  --lgm-shadow-md: 0 8px 24px rgba(107, 30, 30, 0.12);
  --lgm-shadow-lg: 0 20px 48px rgba(107, 30, 30, 0.18);
  --lgm-shadow-card: 0 25px 60px rgba(0, 0, 0, 0.08);
  --lgm-shadow-btn: 0 15px 40px rgba(168, 56, 46, 0.30);
  --lgm-shadow-focus: 0 0 0 4px rgba(212, 175, 55, 0.35);

  /* Motion */
  --lgm-transition-fast: 250ms ease-out;
  --lgm-transition-med: 350ms ease-out;

  /* Layout */
  --lgm-container-max: 1280px;
  /* Header height lives in header.css (--lgm-header-height: 60px) —
     the header is a self-contained, independently maintained
     component (see header.css's file comment), so its own sizing
     token belongs there, not duplicated here. */
}