/* Page themes via body[data-page] — load after catalog.css */

body[data-page="windows"] {
  --accent: #b4f23c;
  --accent-2: #3de8d4;
  --accent-on: #0a1200;
  --nav-active: var(--accent-2);
  --nav-active-ink: #0a1200;
  --glow: rgba(180, 242, 60, 0.32);
}
body[data-page="windows"] .bg-mesh {
  background:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(180, 242, 60, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(61, 232, 212, 0.10), transparent 50%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(61, 232, 212, 0.05), transparent 55%),
    var(--bg);
}
body[data-page="windows"] .bg-grid {
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}

body[data-page="mac"] {
  --accent: #d8f25c;
  --accent-2: #5ee9a0;
  --accent-on: #152000;
  --nav-active: var(--accent);
  --nav-active-ink: #152000;
  --glow: rgba(216, 242, 92, 0.32);
}
body[data-page="mac"] .bg-mesh {
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%, rgba(216, 242, 92, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 40% at 92% 8%, rgba(94, 233, 160, 0.09), transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(240, 193, 74, 0.06), transparent 55%),
    var(--bg);
}

body[data-page="web"] {
  --accent: #5bc8ff;
  --accent-2: #8b9cff;
  --accent-on: #041018;
  --nav-active: var(--accent-2);
  --nav-active-ink: var(--bg);
  --glow: rgba(91, 200, 255, 0.32);
}
body[data-page="web"] .bg-mesh {
  background:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(91, 200, 255, 0.13), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(139, 156, 255, 0.11), transparent 50%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(139, 156, 255, 0.05), transparent 55%),
    var(--bg);
}
body[data-page="web"] .bg-grid {
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}

body[data-page="activity"] {
  --accent: #ff8a4c;
  --accent-2: #ffb020;
  --accent-on: #1a0c00;
  --nav-active: var(--accent);
  --nav-active-ink: #1a0c00;
  --glow: rgba(255, 138, 76, 0.32);
}
body[data-page="activity"] .bg-mesh {
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%, rgba(255, 138, 76, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 40% at 92% 8%, rgba(255, 176, 32, 0.10), transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(255, 107, 107, 0.07), transparent 55%),
    var(--bg);
}

body[data-page="article"] {
  --accent: #3ecfcf;
  --accent-2: #7ee0e0;
  --accent-on: #041414;
  --nav-active: var(--accent);
  --nav-active-ink: #041414;
  --glow: rgba(62, 207, 207, 0.32);
}
body[data-page="article"] .bg-mesh {
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%, rgba(62, 207, 207, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 40% at 92% 8%, rgba(69, 183, 209, 0.10), transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(126, 224, 224, 0.06), transparent 55%),
    var(--bg);
}

body[data-page="about"] {
  --accent: #b8f23d;
  --accent-2: #3de8d4;
  --accent-on: #0a1200;
  --nav-active: var(--accent-2);
  --nav-active-ink: #0a1200;
  --glow: rgba(184, 242, 61, 0.28);
  --sticky-offset: calc(var(--topbar-inset, 0.75rem) + var(--topbar-h));
}
body[data-page="about"] .bg-mesh {
  background:
    radial-gradient(ellipse 75% 50% at 18% -10%, rgba(184, 242, 61, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 42% at 88% 6%, rgba(61, 232, 212, 0.12), transparent 52%),
    radial-gradient(ellipse 60% 45% at 50% 108%, rgba(91, 200, 255, 0.08), transparent 55%),
    var(--bg);
}