=== BEGIN dark.css (Part 1/3) ===

/* =========================================
   DARK MODE — Deep Space Blue
   Global Variables (Descriptive Names)
   ========================================= */

html[data-theme="dark"],
html[data-theme="auto"] {
  /* Core palette */
  --color-background: #0b0f19;
  --color-surface: #111827;

  /* Text */
  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;

  /* Borders + Dividers */
  --color-border: rgba(255, 255, 255, 0.08);

  /* Brand Accents */
  --color-accent: #0099ad;
  --color-accent-strong: #66d9ff;
  --color-neon: #39ff14;
  --color-mint: #00ff9d;

  /* Component-level variables */
  --tile-shadow: 0 10px 28px rgba(0,0,0,0.55);
  --tile-hover-shadow: 0 16px 36px rgba(0,0,0,0.6);

  --footer-btn-bg: rgba(255,255,255,0.08);
  --footer-btn-hover-bg: #00698c;

  --menu-bg: #1f2937;
  --menu-hover-bg: #374151;
  --menu-hover-text: var(--color-mint);
}

/* =========================================
   GLOBAL ELEMENTS
   ========================================= */
/* =========================================
   === DARK MODE FABRIC GRADIENT :) ===
   ========================================= */

body {
  background: linear-gradient(to right, #1a1a1a 0%, #243c5b 50%, #1a1a1a 100%);
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

a {
  color: var(--color-accent);
}
a:hover {
  color: var(--color-accent-strong);
}

/* =========================================
   SURFACES (cards, modules, panels)
   ========================================= */

.tile,
.header-flex,
.division-block,
.intro-container,
.intro-text,
.footer-grid,
.footer-bottom {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

=== END dark.css (Part 1/3) ===

=== BEGIN dark.css (Part 2/3) ===

/* =========================================
   TILE GRID + TILES
   ========================================= */

.tile {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--tile-shadow);
}

.tile:hover {
  box-shadow: var(--tile-hover-shadow);
}

.tile h3 {
  color: var(--color-text);
}

.tile img {
  filter: brightness(0.95) contrast(1.05) saturate(1.05);
}

/* =========================================
   HEADER FLEX + LOGO + WELCOME TEXT
   ========================================= */

.welcome-text {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* =========================================
   DIVISIONS + BUTTONS
   ========================================= */

.division-btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
}

.division-btn:hover {
  background: var(--menu-hover-bg);
  color: var(--color-text);
}

/* Badges (NEW, etc.) */
.division-badge {
  background: #ffcc00;
  color: #000;
}

/* =========================================
   INTRO SECTION
   ========================================= */

.intro-text {
  color: var(--color-text);
}

.intro-buttons .btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
}

.intro-buttons .btn:hover {
  background: var(--menu-hover-bg);
  color: var(--color-text);
}

=== END dark.css (Part 2/3) ===

=== BEGIN dark.css (Part 3/3) ===

/* =========================================
   FOOTER
   ========================================= */

.footer-grid {
  background: var(--color-surface);
}

.footer-block h4,
.footer-block h5 {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-neon);
}

.footer-block h4:hover,
.footer-block h5:hover {
  border-bottom-color: var(--color-mint);
}

.footer-btn {
  background: var(--footer-btn-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.footer-btn:hover {
  background: var(--footer-btn-hover-bg);
  color: #000;
}

/* =========================================
   MENUS (Cassiopeia main menu + mod-menu)
   ========================================= */

.main-nav a,
.mod-menu a {
  background: var(--menu-bg);
  color: var(--color-text);
  border-radius: 999px;
}

.main-nav a:hover,
.mod-menu a:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

/* Active menu item (ghosted) */
.main-nav li.current a,
.mod-menu li.current a,
.main-nav li.active a,
.mod-menu li.active a {
  color: rgba(255,255,255,0.25) !important;
  pointer-events: none;
  cursor: default;
}

/* =========================================
   GLOBAL BUTTONS
   ========================================= */

button,
.btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
}

button:hover,
.btn:hover {
  background: var(--menu-hover-bg);
  color: var(--color-text);
}

=== END dark.css (Part 3/3) ===