/* ==========================================================================
   FlexNet Theme — DEFAULT (Dark Blue)
   LOAD ORDER: bem-starter-base.css → theme-default.css
   ========================================================================== */

:root {
  /* == Colors ============================================================= */
  --color-bg: #0a0f1e;
  --color-bg-elev: #111627;
  --color-fg: #dee6f2;
  --color-fg-muted: #aeb7c7;
  --color-border: #1c2438;

  /* == Brand Palette ====================================================== */
  --brand-500: #6b8cff;
  --brand-600: #5780ff;
  --brand-700: #3563ff;
  --color-primary: var(--brand-600);
  --color-primary-contrast: #ffffff;

  /* == Shadows ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 10px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 50px rgba(0,0,0,.5);
  --panel-shadow: 0 8px 24px rgba(0,0,0,.45);

  /* == Background Gradients =============================================== */
  --bg-gradient:
    radial-gradient(1200px 600px at 5% -10%, rgba(101,115,255,.14), transparent 60%),
    radial-gradient(1200px 800px at 95% -5%, rgba(64,200,255,.10), transparent 55%),
    radial-gradient(900px 700px at 50% -20%, rgba(140,70,255,.10), transparent 60%),
    #0a0f1e;

  --panel-gradient: linear-gradient(175deg, rgba(90,110,255,.16), rgba(64,200,255,.11) 35%, rgba(20,25,40,.20) 60%);

  /* == Header ============================================================= */
  --header-gradient:
    radial-gradient(1200px 600px at 10% -80%, rgba(101,115,255,.20), transparent 40%),
    radial-gradient(900px 500px at 90% -70%, rgba(64,200,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  
  --header-shadow: none;

  /* == Special Effects ==================================================== */
  --backdrop-filter: saturate(120%) blur(10px);
  --logo-filter: none;
  --text-shadow-primary: none;
  --text-shadow-accent: none;
  --hero-title-shadow: 0 8px 28px rgba(0,0,0,.35);

  /* == Pills ============================================================== */
  --pill-hover-shadow: 0 10px 24px rgba(53,99,255,.35);
  --pill-active-bg: linear-gradient(175deg, rgba(90,110,255,.18), rgba(64,200,255,.12) 35%, rgba(20,25,40,.22) 65%),
                     color-mix(in srgb, var(--color-bg-elev) 82%, transparent);
  --pill-active-shadow: 0 14px 32px rgba(53,99,255,.45);

  /* == Buttons ============================================================ */
  --button-shadow: 0 6px 20px rgba(53,99,255,.35);
  --button-hover-shadow: 0 12px 28px rgba(53,99,255,.45);
  --button-active-shadow: 0 6px 18px rgba(53,99,255,.30);
  --button-secondary-bg: #7b5cff;
  --button-secondary-shadow: 0 6px 20px rgba(123,92,255,.35);
  --button-secondary-hover-shadow: 0 12px 28px rgba(123,92,255,.45);

  /* == Code =============================================================== */
  --code-color: inherit;
  --code-shadow: none;

  /* == Footer ============================================================= */
  --footer-bg: #0a101e;
  --footer-section-bg: #0d1221;
  --footer-bottom-bg: #0f1c2e;
}

/* Optional: Light theme variant */
[data-theme="light"] {
  --color-bg: #f7f9fd;
  --color-bg-elev: #ffffff;
  --color-fg: #0f172a;
  --color-fg-muted: #495369;
  --color-border: #e3e8f3;
  
  --bg-gradient:
    radial-gradient(1200px 600px at 5% -10%, rgba(53,99,255,.08), transparent 60%),
    radial-gradient(1200px 800px at 95% -5%, rgba(0,170,255,.06), transparent 55%),
    #f7f9fd;
  
  --panel-gradient: linear-gradient(175deg, rgba(53,99,255,.08), rgba(0,170,255,.06) 35%, rgba(255,255,255,.85) 65%);
  --panel-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}