/* ============================================
   E-Ink is now the DEFAULT theme.
   This file handles:
   1. E-ink base enhancements (no data-theme needed)
   2. Color theme overrides [data-theme="color"]
   ============================================ */

/* Paper texture overlay — default */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--eink-grain);
  background-repeat: repeat;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* Remove texture in color theme */
[data-theme="color"] body::after {
  display: none;
}

/* Soft e-ink rendering — default */
body {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  text-rendering: geometricPrecision;
}

[data-theme="color"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
}

/* E-ink blur — default */
.site-wrapper {
  filter: blur(0.6px);
}

[data-theme="color"] .site-wrapper {
  filter: none;
}

/* Header ticker — dark grey default */
.header-ticker {
  background-color: #211f1b;
  color: #e6e3dc;
}

[data-theme="color"] .header-ticker {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Ticker icons — warm grey default */
.header-micros img {
  filter: brightness(0) invert(0.88) sepia(0.15);
}

[data-theme="color"] .header-micros img {
  filter: none;
}

/* Toggle icon — warm grey default */
.theme-toggle img {
  filter: brightness(0) invert(0.88) sepia(0.15);
}

[data-theme="color"] .theme-toggle img {
  filter: none;
}

/* Sun/moon visibility — default shows moon (e-ink active) */
.toggle-icon--default {
  display: none;
}

.toggle-icon--eink {
  display: inline;
}

[data-theme="color"] .toggle-icon--default {
  display: inline;
}

[data-theme="color"] .toggle-icon--eink {
  display: none;
}



/* Nav links hover */
.nav-link:hover {
  color: #3a3835;
}

[data-theme="color"] .nav-link:hover {
  color: var(--color-accent);
}

/* Modal — dark background default */
.modal-content {
  background-color: #211f1b;
  color: #d6d3cc;
}

[data-theme="color"] .modal-content {
  background-color: var(--color-text);
  color: var(--color-bg);
}

/* Modal X cursor — grey default */
.modal-overlay,
.modal-backdrop,
.modal-content {
  cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='4' x2='20' y2='20' stroke='%23888888' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='4' x2='4' y2='20' stroke='%23888888' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, pointer;
}

[data-theme="color"] .modal-overlay,
[data-theme="color"] .modal-backdrop,
[data-theme="color"] .modal-content {
  cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='4' x2='20' y2='20' stroke='%230c48ff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='4' x2='4' y2='20' stroke='%230c48ff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, pointer;
}

/* Modal stats */
.modal-stat .stat-value {
  border-color: #8a8680;
  color: #8a8680;
}

[data-theme="color"] .modal-stat .stat-value {
  border-color: inherit;
  color: inherit;
}

/* Modal roles */
.modal-roles span {
  color: #9a9690;
}

.modal-roles .role-sep {
  color: #9a9690;
}

[data-theme="color"] .modal-roles span,
[data-theme="color"] .modal-roles .role-sep {
  color: inherit;
}

/* Background blur when modal open */
body.modal-open .site-wrapper {
  filter: blur(2px) brightness(0.5) grayscale(1);
}

[data-theme="color"] body.modal-open .site-wrapper {
  filter: blur(2px) brightness(0.7);
}

/* Custom cursor eye — greyscale default */
.cursor-eye svg circle,
.cursor-eye svg path {
  stroke: #211f1b;
  fill: none;
}

[data-theme="color"] .cursor-eye svg circle,
[data-theme="color"] .cursor-eye svg path {
  stroke: currentColor;
  fill: none;
}

[data-theme="color"] .cursor-eye svg circle {
  fill: currentColor;
}

/* ============================================
   Blue Theme — overrides (unchanged)
   ============================================ */
[data-theme="blue"] {
  --color-bg: #0c48ff;
  --color-text: #fcf9e8;
  --color-accent: #fcf9e8;
}

[data-theme="blue"] body::after {
  display: none;
}

[data-theme="blue"] body {
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
}

[data-theme="blue"] .site-wrapper {
  filter: none;
}

[data-theme="blue"] .header-ticker {
  background-color: var(--color-bg);
  color: var(--color-text);
}

[data-theme="blue"] .header-micros img {
  filter: brightness(0) invert(1);
}

[data-theme="blue"] .theme-toggle img {
  filter: brightness(0) invert(1);
}

[data-theme="blue"] .toggle-icon--default {
  display: inline;
}

[data-theme="blue"] .toggle-icon--eink {
  display: none;
}


[data-theme="blue"] .nav-link:hover {
  color: var(--color-accent);
}

[data-theme="blue"] .logo img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

[data-theme="blue"] .logo:hover img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

[data-theme="blue"] .nav-link {
  color: #fcf9e8;
}

[data-theme="blue"] .modal-overlay,
[data-theme="blue"] .modal-backdrop,
[data-theme="blue"] .modal-content {
  cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='4' x2='20' y2='20' stroke='%23fcf9e8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='4' x2='4' y2='20' stroke='%23fcf9e8' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, pointer;
}

/* ============================================
   Mobile — color theme overrides
   ============================================ */
@media (max-width: 768px) {
  [data-theme="color"] .logo img {
    filter: none;
    opacity: 1;
  }

  [data-theme="color"] .marquee-item a {
    color: #0c48ff;
  }

  [data-theme="color"] .marquee-number {
    color: #0c48ff;
  }

  [data-theme="color"] .nav-link {
    color: #0c48ff;
  }
}