/* ==========================================================================
   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;

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

  /* == 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;

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

/* == Admin Panel Styles =================================================== */
.admin-header {
  border-bottom: 2px solid var(--color-border);
}

.admin-tabs {
  border-bottom: 1px solid var(--color-border);
}

.admin-tab {
  color: var(--color-fg-muted);
  border-bottom: 3px solid transparent;
}

.admin-tab:hover {
  color: var(--color-fg);
}

.admin-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.form-label {
  color: var(--color-fg);
}

.form-input,
.form-textarea,
.form-select {
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-elev);
  color: var(--color-fg);
}

.form-select option {
  background-color: var(--color-bg-elev);
  color: var(--color-fg);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: var(--color-bg-elev);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-border);
}

.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
}

.btn-danger:hover {
  opacity: 0.9;
}

.item-list {
  border: 1px solid var(--color-border);
}

.item-list-header {
  background: var(--color-bg-elev);
  border-bottom: 1px solid var(--color-border);
}

.item {
  border-bottom: 1px solid var(--color-border);
}

.item:last-child {
  border-bottom: none;
}

.item-meta {
  color: var(--color-fg-muted);
}

.code-output {
  background: var(--color-bg-elev);
  color: var(--color-fg);
}

.alert-success {
  background: rgba(22, 163, 74, 0.15);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.alert-info {
  background: rgba(33, 150, 243, 0.15);
  color: var(--color-info);
  border: 1px solid var(--color-info);
}

.hero-actions-box {
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
}

/* 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);
}

/* == Footer Theme Styles ==================================================== */
.c-doc-footer__section-title {
  color: var(--color-fg);
  text-shadow: var(--text-shadow-accent);
}

.c-doc-footer__section-content {
  color: var(--color-fg-muted);
}

.c-doc-footer__link {
  color: var(--color-primary);
}

.c-doc-footer__link::before {
  opacity: 0.6;
}

.c-doc-footer__link:hover,
.c-doc-footer__link:focus {
  color: var(--color-primary);
  text-shadow: 0 0 12px var(--color-primary), 0 0 24px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.c-doc-footer__link:hover::before,
.c-doc-footer__link:focus::before {
  opacity: 1;
}