:root {
  --erris-bg: #090909;
  --erris-fg: #f1f5f9;
  --erris-accent: #baff00;
  --erris-spinner-accent: #baff00;
  --erris-spinner-track: rgba(255, 255, 255, 0.1);
  --ion-color-primary: #baff00;
  --ion-color-primary-rgb: 186, 255, 0;
  --ion-color-primary-contrast: #090909;
  --ion-color-medium: #92949c;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-danger: #eb445a;
  --ion-color-danger-contrast: #ffffff;
}

html.light {
  --erris-bg: #ffffff;
  --erris-fg: #1a1a1a;
  --erris-spinner-accent: #1a3010;
  --erris-spinner-track: rgba(0, 0, 0, 0.08);
}

html,
body {
  background-color: var(--erris-bg);
  color: var(--erris-fg);
}

/* Prevent white flash for solid variant buttons before JS/theme hydration */
ion-button[color="medium"].button-solid,
ion-button[color="primary"].button-solid,
ion-button[color="danger"].button-solid {
  background: var(--ion-color-medium);
  color: var(--ion-color-medium-contrast);
}
ion-button[color="primary"].button-solid {
  background: var(--ion-color-primary);
  color: var(--ion-color-primary-contrast);
}
ion-button[color="danger"].button-solid {
  background: var(--ion-color-danger);
  color: var(--ion-color-danger-contrast);
}
ion-button[color="medium"].button-solid::part(native) {
  background: var(--ion-color-medium);
  color: var(--ion-color-medium-contrast);
}
ion-button[color="primary"].button-solid::part(native) {
  background: var(--ion-color-primary);
  color: var(--ion-color-primary-contrast);
}
ion-button[color="danger"].button-solid::part(native) {
  background: var(--ion-color-danger);
  color: var(--ion-color-danger-contrast);
}

ion-button[color="medium"][fill="solid"]::part(native) {
  background: var(--ion-color-medium);
  color: var(--ion-color-medium-contrast);
}
ion-button[color="primary"][fill="solid"]::part(native) {
  background: var(--ion-color-primary);
  color: var(--ion-color-primary-contrast);
}
ion-button[color="danger"][fill="solid"]::part(native) {
  background: var(--ion-color-danger);
  color: var(--ion-color-danger-contrast);
}

ion-button[color="medium"][fill="solid"] {
  --background: var(--ion-color-medium);
  --color: var(--ion-color-medium-contrast);
}
ion-button[color="primary"][fill="solid"] {
  --background: var(--ion-color-primary);
  --color: var(--ion-color-primary-contrast);
}
ion-button[color="danger"][fill="solid"] {
  --background: var(--ion-color-danger);
  --color: var(--ion-color-danger-contrast);
}

ion-button[fill="solid"][color="primary"]:not(.hydrated),
ion-button[fill="solid"][color="medium"]:not(.hydrated),
ion-button[fill="solid"][color="danger"]:not(.hydrated) {
  display: inline-block;
  background: var(--ion-color-primary);
  color: var(--ion-color-primary-contrast);
  font:
    500 14px/1.2 system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    Arial,
    sans-serif;
  padding: 8px 14px;
  border-radius: 4px;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  cursor: pointer;
  transition: none !important;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
ion-button[fill="solid"][color="medium"]:not(.hydrated) {
  background: var(--ion-color-medium);
  color: var(--ion-color-medium-contrast);
}
ion-button[fill="solid"][color="danger"]:not(.hydrated) {
  background: var(--ion-color-danger);
  color: var(--ion-color-danger-contrast);
}

ion-button.force-color-medium,
ion-button.force-color-medium::part(native) {
  --background: var(--ion-color-medium);
  --color: var(--ion-color-medium-contrast);
  background: var(--ion-color-medium) !important;
  color: var(--ion-color-medium-contrast) !important;
}
ion-button.force-color-primary,
ion-button.force-color-primary::part(native) {
  --background: var(--ion-color-primary);
  --color: var(--ion-color-primary-contrast);
  background: var(--ion-color-primary) !important;
  color: var(--ion-color-primary-contrast) !important;
}
ion-button.force-color-danger,
ion-button.force-color-danger::part(native) {
  --background: var(--ion-color-danger);
  --color: var(--ion-color-danger-contrast);
  background: var(--ion-color-danger) !important;
  color: var(--ion-color-danger-contrast) !important;
}

/* ── Boot splash (removed by dismissBootSplash once React mounts) ── */
#erris-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--erris-bg);
  color: var(--erris-fg);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

#erris-boot-splash.erris-boot-splash--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#erris-boot-splash img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

#erris-boot-splash .erris-boot-spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--erris-spinner-track);
  border-top-color: var(--erris-spinner-accent);
  border-radius: 50%;
  animation: errisBootSpin 0.8s linear infinite;
}

@keyframes errisBootSpin {
  to {
    transform: rotate(360deg);
  }
}