/* =========================================================
   Base: light mode (default)
   ========================================================= */

html {
  background: var(--color-white);
  color: var(--color-black);
  transition: background var(--transition-normal), color var(--transition-normal);
}

html .section {
  background: transparent;
}

/* =========================================================
   Dark theme
   ========================================================= */

html.is-black-bg {
  background: var(--color-black);
  color: var(--color-white);
  --color-bg: var(--color-black);
  --color-text: var(--color-white);
  --color-accent: var(--color-green);
  --color-border: rgba(255, 255, 255, 0.12);
}

html.is-black-bg .btn-primary {
  border-color: var(--color-green);
  color: var(--color-green);
}

html.is-black-bg .btn-primary:hover {
  background: var(--color-green);
  color: var(--color-black);
}

html.is-black-bg .app-card,
html.is-black-bg .plugin-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

html.is-black-bg .app-card:hover,
html.is-black-bg .plugin-card:hover {
  border-color: var(--color-green);
}

html.is-black-bg .link-primary {
  color: var(--color-green);
}

html.is-black-bg .newsletter-form input[type='email'] {
  border-color: rgba(255, 255, 255, 0.2);
}

html.is-black-bg .newsletter-form input[type='email']:focus {
  border-color: var(--color-green);
}

/* =========================================================
   Blue theme
   ========================================================= */

html.is-blue-bg {
  background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-dark-blue) 100%);
  color: var(--color-white);
  --color-bg: var(--color-blue);
  --color-text: var(--color-white);
  --color-accent: var(--color-green);
  --color-border: rgba(255, 255, 255, 0.2);
}

html.is-blue-bg .app-card,
html.is-blue-bg .plugin-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

html.is-blue-bg .app-card:hover,
html.is-blue-bg .plugin-card:hover {
  border-color: var(--color-green);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

html.is-blue-bg .link-primary {
  color: var(--color-green);
}

html.is-blue-bg .btn-primary {
  border-color: var(--color-green);
  color: var(--color-green);
}

html.is-blue-bg .btn-primary:hover {
  background: var(--color-green);
  color: var(--color-dark-blue);
}

html.is-blue-bg .newsletter-form input[type='email'] {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

html.is-blue-bg .newsletter-form input[type='email']:focus {
  border-color: var(--color-green);
}

/* =========================================================
   is-ready — applied after JS loads (hides FOUC on canvas)
   ========================================================= */

html:not(.is-ready) #canvas {
  opacity: 0;
}

html.is-ready #canvas {
  opacity: 1;
  transition: opacity 0.6s ease;
}