/* dark-app theme — dark gradient, neon glow from primary_color
   Layout colors use html:root to beat @media(prefers-color-scheme:dark) :root in main.css.
   Do NOT set --color-primary here — it's set per domain via <style> in <head>. */
html:root {
  --color-bg: #0d0d1a;
  --color-surface: #1a1a2e;
  --color-text: #e0e0e0;
  --color-border: color-mix(in srgb, #fff 10%, transparent);
}
/* Defaults only: these yield if the domain <style> sets them */
:root {
  --color-primary-light: #8080ff;  /* WCAG AA safe on --color-surface (#1a1a2e): 5.0:1 */
  --color-glow: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --color-accent: var(--color-secondary, color-mix(in srgb, var(--color-primary) 70%, #000));
  --color-gradient: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

/* Fallback for Safari <16.4 which doesn't support color-mix */
@supports not (color: color-mix(in srgb, red 30%, transparent)) {
  :root {
    --color-glow: var(--color-primary);
  }
}

/* Force dark text-rendering everywhere in this theme */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Prose typography — force readable text on dark backgrounds */
.prose {
  color: var(--color-text) !important;
  h1, h2, h3, h4 { color: var(--color-text) !important; }
  p, li, td, th, dd, dt, blockquote { color: var(--color-text) !important; }
  strong { color: var(--color-text) !important; }
  a:not([data-reg-source]) { color: var(--color-primary-light) !important; }
}

/* Override Tailwind's hardcoded gray utilities for dark-app */
.bg-white { background-color: var(--color-surface) !important; }
.bg-gray-100 { background-color: #1e1e30 !important; }
.bg-gray-200 { background-color: #252540 !important; }
.text-gray-600 { color: #a0a0c0 !important; }
.text-gray-700 { color: #b0b0d0 !important; }
.text-gray-400 { color: #9090b0 !important; }  /* was #707090 (3.65:1) → 4.6:1 on #1a1a2e */
.border-gray-200 { border-color: color-mix(in srgb, #fff 8%, transparent) !important; }
