/* =====================================================================
   THEME - Seven Eagles Relocation
   ---------------------------------------------------------------------
   THIS IS THE ONLY FILE YOU NEED TO EDIT TO RESKIN THE ENTIRE SITE.

   - Colors: change any --color-* value, every page updates instantly.
   - Fonts: change --font-display / --font-body, all typography swaps.
   - Layout rhythm: change spacing/radius/elevation tokens, layout reflows.

   Rule: NEVER hardcode a color, font, or radius in styles.css or any
   .html file. Always reference these custom properties via var(--name).
   ===================================================================== */

:root {

  /* ---- BRAND COLORS (sourced from client logo eagle: royal blue) -- */
  --color-primary:        #0048A8;   /* Eagle blue, nav, headings, primary buttons */
  --color-primary-deep:   #003580;   /* Hover/active for primary, deeper */
  --color-primary-soft:   #1B5DC4;   /* Lighter blue accent, links, secondary fills */
  --color-secondary:      #2E5C9E;   /* Supporting UI, icon outlines */
  --color-accent:           #3DAA5F;  /* Brand Green: decorative ONLY (lines, dots, borders, fills) */
  --color-accent-deep:      #2D8B47;  /* Hover for accent backgrounds */
  --color-accent-text:      #FFFFFF;  /* Foreground colour ON TOP OF a solid green button */
  --color-accent-on-light:  #1F7038;  /* Deeper green for green TEXT on white / light surfaces (WCAG AA 5.0:1) */
  --color-accent-on-dark:   #6FE099;  /* Lighter mint for green TEXT on navy / dark surfaces (WCAG AA 4.5+:1) */

  /* ---- SURFACES + BACKGROUNDS -------------------------------------- */
  --color-bg:             #F8F9FA;   /* Page background, airy */
  --color-surface:        #FFFFFF;   /* Cards, elevated surfaces */
  --color-surface-2:      #F1F4F9;   /* Subtle blue-tinted surface tier */
  --color-surface-tint:   #E7EEF8;   /* Even softer blue tint */

  /* ---- TEXT -------------------------------------------------------- */
  --color-text:           #1A1F2E;   /* Body text, slightly blue-tinted */
  --color-text-muted:     #4A5161;   /* Captions, secondary text */
  --color-text-inverse:   #F0F1F2;   /* On dark / blue backgrounds */

  /* ---- BORDERS + DIVIDERS ----------------------------------------- */
  --color-border:         #C9D2E0;
  --color-border-strong:  #6B7588;

  /* ---- RGB TRIPLETS (for rgba() opacity tricks - keep in sync) ---- */
  --color-primary-rgb:    0, 72, 168;       /* matches --color-primary */
  --color-text-rgb:       26, 31, 46;       /* matches --color-text */
  --color-bg-rgb:         248, 249, 250;    /* matches --color-bg */

  /* ---- SEMANTIC --------------------------------------------------- */
  --color-success:        #2E7D32;
  --color-error:          #BA1A1A;
  --color-warning:        #E09F3E;

  /* =====================================================================
     TYPOGRAPHY - swap fonts across the entire site by editing two lines
     ===================================================================== */
  --font-display:   "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body:      "Inter",      system-ui, -apple-system, sans-serif;
  --font-editorial: "Playfair Display", Georgia, "Times New Roman", serif;  /* big magazine display, hero */

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --container-max:    1280px;
  --gutter:           24px;
  --margin-desktop:   64px;
  --margin-mobile:    20px;
  --section-padding:  80px;

  /* ---- STACK RHYTHM (vertical spacing) ---------------------------- */
  --stack-xs:  4px;
  --stack-sm:  8px;
  --stack-md:  16px;
  --stack-lg:  32px;
  --stack-xl:  64px;

  /* =====================================================================
     RADIUS
     ===================================================================== */
  --radius-sm:    0.25rem;
  --radius-md:    0.5rem;     /* Buttons, inputs */
  --radius-lg:    1rem;       /* Cards, images, elevated containers */
  --radius-full:  9999px;

  /* =====================================================================
     ELEVATION (shadows reference primary colour for brand cohesion)
     ===================================================================== */
  --shadow-card:        0 4px 20px rgba(0, 72, 168, 0.08);
  --shadow-hover:       0 8px 30px rgba(0, 72, 168, 0.14);
  --shadow-cta-hover:   0 8px 24px rgba(61, 170, 95, 0.30);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --transition-fast:  0.15s ease;
  --transition-med:   0.25s ease;
  --transition-slow:  0.4s ease;
}