/* =========================================
   LIGHT MODE — Silky Steel Elegance
   ========================================= */

html[data-theme="light"] {

  /* ============================
     VARIABLES
     ============================ */
  --color-background: #cfd8e4; /* slightly cooler, less milky */
  --color-surface: #ffffff;

  --color-text: #1f2937;
  --color-text-muted: #6b7280;

  --color-border: rgba(0, 0, 0, 0.06);

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

  --tile-shadow: 0 10px 28px rgba(0,0,0,0.15);
  --tile-hover-shadow: 0 16px 36px rgba(0,0,0,0.2);

  --footer-btn-bg: rgba(0,0,0,0.35);
  --footer-btn-hover-bg: #00698c;

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

  /* Upgraded light-mode gradient (silky, elegant, animated) */
  --theme-background: linear-gradient(
    to right,
    #c7d3e0 0%,   /* soft silver-blue */
    #4a6a8c 50%, /* silky steel highlight */
    #c7d3e0 100%
  );
}

/* =========================================
   APPLY LIGHT-MODE BACKGROUND + FABRIC WEAVE
   ========================================= */

html[data-theme="light"] body {
  background: var(--theme-background);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  position: relative;
}

/* Elegant, refined weave (subtle but crisp) */
html[data-theme="light"] body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;

  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,0.06) 0px,
      rgba(0,0,0,0.06) 2px,
      transparent 2px,
      transparent 6px
    );

  pointer-events: none;
  z-index: 0;
}

/* Soft radial glow for depth (barely visible, very elegant) */
html[data-theme="light"] body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;

  background: radial-gradient(
    circle at 50% 40%,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0) 70%
  );

  pointer-events: none;
  z-index: 0;
}

/* =========================================
   FOOTER (unchanged)
   ========================================= */

html[data-theme="light"] .footer-grid,
html[data-theme="light"] .footer-grid *,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .footer-bottom * {
  color: #080a0d;
}

html[data-theme="light"] .footer-btn {
  color: #080a0d;
  border-color: rgba(0,0,0,0.35);
}

html[data-theme="light"] .footer-btn:hover {
  color: #00698c;
}

/* =========================================
   SURFACES (unchanged)
   ========================================= */

html[data-theme="light"] .tile,
html[data-theme="light"] .header-flex,
html[data-theme="light"] .division-block,
html[data-theme="light"] .intro-container,
html[data-theme="light"] .intro-text,
html[data-theme="light"] .footer-grid,
html[data-theme="light"] .footer-bottom {


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

  .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);
    pointer-events: none;
    cursor: default;
  }
}