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

/* =========================================
   LIGHT MODE — Soft Mist
   Global Variables (Descriptive Names)
   ========================================= */

html[data-theme="light"],
html[data-theme="auto"] {
  /* Core palette */
  --color-background: #f3f4f6;
  --color-surface: #ffffff;

  /* Text */
  --color-text: #1f2937;
  --color-text-muted: #6b7280;

  /* Borders + Dividers */
  --color-border: rgba(0, 0, 0, 0.06);

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

  /* Component-level variables */
  --tile-shadow: 0 2px 6px rgba(0,0,0,0.08);
  --tile-hover-shadow: 0 12px 24px rgba(0,0,0,0.15);

  --footer-btn-bg: rgba(0,0,0,0.04);
  --footer-btn-hover-bg: #0099ad;

  --menu-bg: #e5e7eb;
  --menu-hover-bg: #d1d5db;
  --menu-hover-text: var(--color-accent-strong);
}

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

body {
  background: linear-gradient(to right, #ababab 0%, #375376 50%, #ababab 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 light.css (Part 1/3) ===

=== BEGIN light.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(1) contrast(1) saturate(1);
}

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

.welcome-text {
  color: var(--color-text);
  text-shadow: none;
}

/* =========================================
   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 light.css (Part 2/3) ===

=== BEGIN light.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: #fff;
}

/* =========================================
   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(0,0,0,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 light.css (Part 3/3) ===