/* ==========================================================================
   FlexNet Theme — DISA (Updated Color Scheme)
   LOAD ORDER: bem-base.css → theme-disa.css
   ========================================================================== */

:root {
  /* == Colors ============================================================= */
  --color-bg: #ffffff;
  --color-bg-elev: #dfdfdf;
  --color-fg: #5b538a;
  --color-fg-muted: #5d6066;
  --color-border: #2c353b;
  --color-dropdown-bg: #ffffff;
  --color-dropdown-bg-focus: #eeeeee;
  --color-dropdown-fg: #24b0e8;
  --color-dropdown-fg-focus: #506496;
  --color-footer-fg: #ffffff;
  --color-footer-title: #ffffff;
  --color-footer-link: #24b0e8;
  --color-footer-copyright: rgba(255, 255, 255, 0.8);

  /* == Brand Palette ====================================================== */
  --brand-primary: #003976;
  --brand-hover: #007eac;
  --brand-accent: #3e9dc0;
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-hover);
  --color-primary-contrast: #ffffff;

  /* == Semantic Colors ==================================================== */
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #3e9dc0;

  /* == Shadows ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.162);
  --shadow-md: 0 4px 12px rgba(0,0,0,.15);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.2);
  --panel-shadow: 0 4px 16px rgba(0,0,0,.1);

  /* == Background Gradients =============================================== */
  --bg-gradient:
    radial-gradient(1400px 700px at 10% 0%, rgba(0,57,118,.04), transparent 60%),
    radial-gradient(1200px 800px at 90% 100%, rgba(62,157,192,.03), transparent 55%),
    #ffffff;

  --panel-gradient: linear-gradient(135deg, 
  #ffffff 0%, 
  #dfdfdf 50%, 
  #ffffff 100%
);

  /* == Header ============================================================= */
  --header-gradient:
    radial-gradient(1200px 600px at 10% -80%, #20272b5b, transparent 50%),
    radial-gradient(900px 500px at 90% -70%, #2c353b75, transparent 55%),
    linear-gradient(180deg, #20272b5b 25%, #2c353b75 70%);
  
  --header-shadow: 0 4px 16px rgba(21,38,59,.3);

  /* == Special Effects ==================================================== */
  --backdrop-filter: saturate(120%) blur(10px);
  --logo-filter: drop-shadow(0 2px 8px rgba(0,57,118,.3));
  --text-shadow-primary: 0 1px 4px rgba(0,57,118,.2);
  --text-shadow-accent: 0 1px 3px rgba(62,157,192,.3);
  --hero-title-shadow: 0 2px 8px rgba(0,57,118,.25), 0 4px 16px rgba(0,0,0,.1);

  /* == Pills ============================================================== */
  --pill-hover-shadow: 
    0 6px 16px rgba(0,126,172,.25), 
    0 2px 8px rgba(62,157,192,.15);
  --pill-active-bg: 
    linear-gradient(135deg, 
      #003976, 
      #004a8f 50%, 
      #003976
    ),
    color-mix(in srgb, var(--color-bg-elev) 90%, transparent);
  --pill-active-shadow: 
    0 8px 20px rgba(0,57,118,.3), 
    0 0 16px rgba(62,157,192,.2);

  /* == Buttons ============================================================ */
  --button-shadow: 
    0 4px 12px rgba(0,57,118,.3), 
    0 2px 6px rgba(0,57,118,.2);
  --button-hover-shadow: 
    0 6px 20px rgba(0,126,172,.4), 
    0 2px 10px rgba(62,157,192,.3);
  --button-active-shadow: 
    0 2px 8px rgba(0,57,118,.25);
  --button-secondary-bg: #007eac;
  --button-secondary-shadow: 
    0 4px 12px rgba(62,157,192,.3), 
    0 2px 6px rgba(62,157,192,.2);
  --button-secondary-hover-shadow: 
    0 6px 20px rgba(62,157,192,.4), 
    0 2px 10px rgba(0,126,172,.3);

  /* == Code =============================================================== */
  --code-color: #3e9dc0;
  --code-shadow: 0 0 8px rgba(62,157,192,.15);

  /* == Alerts ============================================================= */
  --alert-success-shadow: 0 0 12px rgba(22,163,74,.15);
  --alert-warning-shadow: 0 0 12px rgba(202,138,4,.15);
  --alert-danger-shadow: 0 0 12px rgba(220,38,38,.15);

  /* == Footer ============================================================= */
  --footer-bg: 
    linear-gradient(180deg, 
      #2c353b 0%, 
      rgba(44,53,59,.98) 100%
    );
  --footer-section-bg: rgba(255,255,255,.05);
  --footer-bottom-bg: rgba(0,0,0,.15);
}

/* Optional: Dark mode adjustments if needed */
[data-theme="dark"] {
  --color-bg: #000000;
  --color-bg-elev: #102033;
  --color-fg: #ffffff;
  --color-fg-muted: #cbd5e1;
  --color-border: #3e4a57;

  --bg-gradient:
    radial-gradient(1400px 700px at 10% 0%, rgba(0,126,172,.08), transparent 60%),
    radial-gradient(1200px 800px at 90% 100%, rgba(62,157,192,.05), transparent 55%),
    #15263b;

  --panel-gradient:
    linear-gradient(135deg,
      rgba(30,49,72,.8),
      rgba(0,126,172,.08) 40%,
      rgba(62,157,192,.06) 80%,
      rgba(30,49,72,.7)
    );

  --header-gradient:
    linear-gradient(180deg,
      #0f1a28 0%,
      rgba(15,26,40,.95) 100%
    );
}

/* ==========================================================================
   END OF DISA THEME FILE
   
   This file now contains theme tokens only.
   All base styling comes from BEM BASE loaded BEFORE this file.
   ========================================================================== */