body {
  font-family: 'Open Sans', sans-serif;
  visibility: visible;

  --wa-color-neutral-on-loud: #dee2e6;
  --wa-color-neutral-on-normal: #dee2e6;

  --wa-color-neutral-on-quiet: var(--wa-color-text-normal);

  --wa-color-neutral-border-loud: var(--wa-color-surface-border);
}

.menu-container {
  --wa-color-neutral-on-quiet: #dee2e6;
}


.app-main {
  background-color: var(--wa-color-surface-lowered);

  --wa-color-neutral-fill-quiet: color-mix(in srgb,
      var(--wa-color-surface-border) 60%,
      var(--wa-color-neutral-fill-loud) 40%);
}

.wa-light wa-card {
  background-color: var(--wa-color-surface-raised);
}

wa-callout[variant="brand"] {
  background-color: color-mix(in srgb, var(--wa-color-brand-fill-loud) 16%, var(--wa-color-surface-default));
}

/* Soft brand-tint hover for outlined brand buttons — the default
   --wa-color-brand-fill-quiet is a deep blue used for filled-hover
   darkening, which on outlined buttons makes the brand-blue text
   unreadable on the same-blue background. */
wa-button[variant="brand"][appearance="outlined"]::part(base):hover {
  background-color: color-mix(in srgb, var(--wa-color-brand-fill-loud) 12%, transparent);
}

/* Hide page until Web Components are ready, avoids flashing, layout shifts or unstyled content */
body.wc-loading {
  visibility: hidden;
}

/* Hide web components until upgraded (prevents FOUC on HTMX swap) */
wa-dialog:not(:defined),
wa-callout:not(:defined),
wa-icon:not(:defined) {
  display: none;
}

.wa-light {
  --wa-color-surface-raised: #ffffff;
  --wa-color-surface-default: #f8f9fa;
  --wa-color-surface-lowered: #e9ecef;
  --wa-color-surface-border: #dee2e6;

  --side-nav-background-color: #ffffff;

  /* Text colors */
  --wa-color-text-normal: #212529;
  --wa-color-text-quiet: #6c757d;
  --wa-color-text-link: #0d6efd;

  /* Button colors (neutral) */
  --wa-color-neutral-fill-loud: #7691a7;
  --wa-color-neutral-fill-normal: #7691a7;
  --wa-color-neutral-fill-quiet: #7da4c1;

  /* Button colors (brand) */
  --wa-color-brand-fill-loud: #0ea5e9;
  --wa-color-brand-fill-normal: #0ea5e9;
  --wa-color-brand-fill-quiet: #0284c7;
  --wa-color-brand-border-loud: #0ea5e9;
  --wa-color-brand-on-quiet: #0ea5e9;
}

.wa-dark {
  --wa-color-surface-raised: #2d3748;
  --wa-color-surface-default: #1a202c;
  --wa-color-surface-lowered: #0f141a;
  --wa-color-surface-border: #4a5568;

  --side-nav-background-color: #2f495e;

  /* Text colors */
  --wa-color-text-normal: #f7fafc;
  --wa-color-text-quiet: #cbd5e0;
  --wa-color-text-link: #63b3ed;

  /* Button colors (neutral) */
  --wa-color-neutral-fill-loud: #2f495e;
  --wa-color-neutral-fill-normal: #2f495e;
  --wa-color-neutral-fill-quiet: #4c6476;

  /* Button colors (brand) */
  --wa-color-brand-fill-loud: #0284c7;
  --wa-color-brand-fill-normal: #0284c7;
  --wa-color-brand-fill-quiet: #0369a1;
  --wa-color-brand-border-loud: #0284c7;
  --wa-color-brand-on-quiet: #0284c7;
}

/* Skeleton loading styles */
.skeleton-field {
  margin-bottom: var(--wa-space-s);
}

.skeleton-label {
  width: 40%;
  height: 1rem;
  margin-bottom: var(--wa-space-xs);
}

.skeleton-input {
  width: 100%;
  height: 3rem;
}

.skeleton-button {
  width: 12rem;
  height: 2.5rem;
  margin-top: var(--wa-space-s);
}