/* ==========================================================================
   Blue Mountain Construction — Web Color Palette
   Derived from the brand logo (navy #01097B, blue #2174B2, sky #2188CF)
   ========================================================================== */

:root {
  /* --- Brand --- */
  --bmc-navy:        #01097B;  /* primary brand / headings */
  --bmc-blue:        #2174B2;  /* secondary brand */
  --bmc-sky:         #2188CF;  /* bright accent */
  --bmc-white:       #FFFFFF;

  /* --- Accent & interactive states --- */
  --bmc-navy-deep:   #01075C;  /* pressed/active on navy elements */
  --bmc-blue-dark:   #14499C;  /* links & primary buttons (AA on white) */
  /* --- Tints (section backgrounds, hover fills) --- */
  --bmc-blue-40:     #A6C7E0;
  --bmc-blue-15:     #DEEAF3;
  --bmc-sky-40:      #A6CFEC;
  --bmc-sky-15:      #DEEDF8;

  /* --- Timeline lane accents (About family tree — Cavan-era green) --- */
  --lane-green:      #2F8F4E;
  --lane-green-dark: #22743D;

  /* --- Text on dark (navy/deep-navy) surfaces --- */
  --on-navy-body:    #CFE0F4;  /* body copy on navy */
  --on-navy-soft:    #DBE4F5;  /* softer copy on navy */
  --on-navy-bright:  #9FD1F5;  /* hero eyebrow over photo */
  --footer-text:     #B9C6E6;
  --footer-muted:    #8EA0C8;

  /* --- Misc surfaces --- */
  --img-loading-bg:  #F4F7FB;  /* behind photos while loading */

  /* --- Neutrals (text & UI chrome) --- */
  --bmc-ink:         #0F1320;  /* darkest body text */
  --bmc-slate:       #334155;  /* standard body text */
  --bmc-gray:        #64748B;  /* muted text */
  --bmc-gray-200:    #E2E8F0;  /* borders, dividers */
  --bmc-off-white:   #F8FAFC;  /* page background */

  /* --- Semantic roles (recommended usage) --- */
  --color-bg:           var(--bmc-off-white);
  --color-surface:      var(--bmc-white);
  --color-heading:      var(--bmc-navy);
  --color-text:         var(--bmc-slate);
  --color-text-muted:   var(--bmc-gray);
  --color-link:         var(--bmc-blue-dark);
  --color-link-hover:   var(--bmc-navy);
  --color-border:       var(--bmc-gray-200);

  --btn-bg:             var(--bmc-navy);
  --btn-bg-hover:       var(--bmc-blue-dark);
  --btn-text:           var(--bmc-white);

  --accent:             var(--bmc-sky);
  --section-alt-bg:     var(--bmc-blue-15);
  --page-head-bg-start: var(--bmc-navy-deep);
  --page-head-bg-end:   var(--bmc-blue);

  /* --- Component roles --- */
  --header-bg:                 var(--bmc-white);
  --header-border:             var(--bmc-gray-200);
  --header-shadow:             0 2px 14px rgba(1,9,123,.10);
  --nav-text:                  var(--bmc-navy);
  --nav-hover-bg:              rgba(1,9,123,.06);
  --nav-active-bg:             rgba(1,9,123,.10);
  --eyebrow-text:              var(--bmc-blue-dark);
  --accent-soft-bg:            var(--bmc-sky-15);
  --accent-soft-text:          var(--bmc-blue-dark);
  --input-bg:                  var(--bmc-white);
  --input-text:                var(--bmc-ink);
  --surface-shadow:            0 10px 24px rgba(1,7,92,.22);
  --capability-map-border:     var(--bmc-blue-40);
  --capability-map-bg:         linear-gradient(135deg, rgba(222,234,243,.78), rgba(255,255,255,.96) 45%, rgba(222,237,248,.82));
  --capability-map-shadow:     0 18px 42px rgba(1,9,123,.08);
  --project-placeholder-a:     var(--bmc-blue-15);
  --project-placeholder-b:     var(--bmc-sky-15);
  --project-placeholder-label: rgba(255,255,255,.85);
  --leader-photo-start:        var(--bmc-blue-15);
  --leader-photo-end:          var(--bmc-sky-15);
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:           #060914;
  --color-surface:      #10182A;
  --color-heading:      #F8FAFC;
  --color-text:         #C9D4E5;
  --color-text-muted:   #9EACC1;
  --color-link:         #64ACDD;
  --color-link-hover:   #A6CFEC;
  --color-border:       #263651;

  --btn-bg:             var(--bmc-blue);
  --btn-bg-hover:       var(--bmc-blue-dark);
  --section-alt-bg:     #0B1224;
  --img-loading-bg:     #0D1526;

  --header-bg:                 #08101F;
  --header-border:             #263651;
  --header-shadow:             0 2px 18px rgba(0,0,0,.38);
  --nav-text:                  #E7EDF9;
  --nav-hover-bg:              rgba(100,172,221,.12);
  --nav-active-bg:             rgba(100,172,221,.18);
  --eyebrow-text:              #9FD1F5;
  --accent-soft-bg:            #112A46;
  --accent-soft-text:          #9FD1F5;
  --input-bg:                  #0B1224;
  --input-text:                #F8FAFC;
  --surface-shadow:            0 12px 28px rgba(0,0,0,.35);
  --capability-map-border:     #2A4F71;
  --capability-map-bg:         linear-gradient(135deg, #0B1730, #10182A 48%, #0C2035);
  --capability-map-shadow:     0 18px 42px rgba(0,0,0,.30);
  --project-placeholder-a:     #102C48;
  --project-placeholder-b:     #0F213B;
  --project-placeholder-label: rgba(6,9,20,.90);
  --leader-photo-start:        #102A46;
  --leader-photo-end:          #0C2035;
}

/* Accessibility note:
   - Navy (#01097B) and Blue Dark (#14499C) both pass WCAG AA for normal text on white.
   - Mid Blue (#2174B2) passes AA with white text; Sky (#2188CF) passes with white
     only for large text (18pt+) and is best kept to large type or decorative fills. */