/* Factor Weave — dark mode override layer.
 *
 * Strategy: keep the existing Tailwind utility classes in the markup
 * unchanged; when <html> carries .dark, this stylesheet overrides the
 * common gray/white tokens with the brand-aligned dark palette from the
 * status page (#0a0e1a bg, #11182b surface, teal accents). Same brand
 * teal/amber that the logo kit and status dashboard use, so the whole
 * site feels like one product when switched.
 *
 * Loaded from every page's <head>. Inline <script> in <head> sets the
 * .dark class BEFORE first paint so there's no flash of light content.
 */

:root {
  --fw-light-bg:           #ffffff;
  --fw-light-surface:      #ffffff;
  --fw-light-page:         #f9fafb;
  --fw-light-text:         #111827;
  --fw-light-text-muted:   #6b7280;
  --fw-light-border:       #e5e7eb;
  --fw-light-border-soft:  #f3f4f6;

  /* Dark palette — matches /status.html exactly. */
  --fw-dark-bg:            #0a0e1a;
  --fw-dark-surface:       #11182b;
  --fw-dark-surface-2:     #161f37;
  --fw-dark-text:          #e2e8f0;
  --fw-dark-text-strong:   #f1f5f9;
  --fw-dark-text-muted:    #94a3b8;
  --fw-dark-text-dim:      #64748b;
  --fw-dark-border:        rgba(148, 163, 184, 0.10);
  --fw-dark-border-strong: rgba(148, 163, 184, 0.18);

  /* Brand teal becomes the active accent in dark mode. */
  --fw-brand-teal:         #0d9488;
  --fw-brand-teal-2:       #14b8a6;
  --fw-brand-teal-glow:    rgba(20, 184, 166, 0.45);
  --fw-brand-amber:        #f59e0b;
  --fw-brand-amber-2:      #fbbf24;
}

html.dark {
  color-scheme: dark;
  background: var(--fw-dark-bg);
}

/* Honor reduced motion — keep theme transitions but kill anything decorative */
@media (prefers-reduced-motion: no-preference) {
  body, .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200,
  .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600,
  .text-gray-500, .text-gray-400,
  .border-gray-100, .border-gray-200, .border-gray-300,
  input, textarea, select, button, a {
    transition: background-color 0.22s ease, color 0.22s ease,
                border-color 0.22s ease, box-shadow 0.22s ease;
  }
}

/* ------------------------------------------------------------------
   DARK MODE: Tailwind utility overrides
   ------------------------------------------------------------------ */

html.dark body {
  background-color: var(--fw-dark-bg);
  color: var(--fw-dark-text);
}

/* Backgrounds */
html.dark .bg-white            { background-color: var(--fw-dark-surface) !important; }
html.dark .bg-gray-50          { background-color: var(--fw-dark-bg) !important; }
html.dark .bg-gray-100         { background-color: var(--fw-dark-surface-2) !important; }
html.dark .bg-gray-200         { background-color: rgba(148,163,184,0.10) !important; }
html.dark .bg-gray-900         { background-color: #020617 !important; }

/* Text */
html.dark .text-gray-900       { color: var(--fw-dark-text-strong) !important; }
html.dark .text-gray-800       { color: var(--fw-dark-text-strong) !important; }
html.dark .text-gray-700       { color: #cbd5e1 !important; }
html.dark .text-gray-600       { color: var(--fw-dark-text-muted) !important; }
html.dark .text-gray-500       { color: var(--fw-dark-text-muted) !important; }
html.dark .text-gray-400       { color: var(--fw-dark-text-dim) !important; }
html.dark .text-white          { color: var(--fw-dark-text-strong) !important; }

/* Borders */
html.dark .border-gray-100,
html.dark .border-gray-200     { border-color: var(--fw-dark-border) !important; }
html.dark .border-gray-300     { border-color: var(--fw-dark-border-strong) !important; }
html.dark .border-b,
html.dark .border-t,
html.dark .border              { border-color: var(--fw-dark-border) !important; }

/* Divide utilities (used in tables) */
html.dark .divide-gray-200 > * + * { border-color: var(--fw-dark-border) !important; }

/* Tailwind primary blue → brand teal in dark mode */
html.dark .bg-primary-50       { background-color: rgba(13,148,136,0.10) !important; }
html.dark .bg-primary-500      { background-color: var(--fw-brand-teal) !important; }
html.dark .bg-primary-600      { background-color: var(--fw-brand-teal) !important; }
html.dark .bg-primary-700      { background-color: var(--fw-brand-teal-2) !important; }
html.dark .text-primary-500,
html.dark .text-primary-600,
html.dark .text-primary-700    { color: var(--fw-brand-teal-2) !important; }
html.dark .border-primary-500,
html.dark .border-primary-600  { border-color: var(--fw-brand-teal) !important; }
html.dark .hover\:bg-primary-700:hover     { background-color: var(--fw-brand-teal) !important; }
html.dark .hover\:text-primary-500:hover,
html.dark .hover\:text-primary-600:hover,
html.dark .hover\:text-primary-700:hover   { color: var(--fw-brand-teal-2) !important; }
html.dark .hover\:border-primary-300:hover { border-color: var(--fw-brand-teal) !important; }
html.dark .focus\:ring-primary-500:focus   { --tw-ring-color: var(--fw-brand-teal-2) !important; }
html.dark .focus\:border-primary-500:focus { border-color: var(--fw-brand-teal-2) !important; }

/* Tier color pills (used on dashboard + admin) */
html.dark .bg-blue-100         { background-color: rgba(20,184,166,0.12) !important; }
html.dark .text-blue-800       { color: #5eead4 !important; }
html.dark .bg-indigo-100       { background-color: rgba(20,184,166,0.16) !important; }
html.dark .text-indigo-800     { color: #5eead4 !important; }
html.dark .bg-purple-100       { background-color: rgba(245,158,11,0.14) !important; }
html.dark .text-purple-800     { color: #fcd34d !important; }
html.dark .bg-green-100        { background-color: rgba(20,184,166,0.12) !important; }
html.dark .text-green-800      { color: #5eead4 !important; }
html.dark .text-green-500,
html.dark .text-green-600      { color: var(--fw-brand-teal-2) !important; }
html.dark .text-red-600,
html.dark .text-red-700        { color: #fca5a5 !important; }
html.dark .text-red-500        { color: #fca5a5 !important; }
html.dark .bg-red-100          { background-color: rgba(239,68,68,0.16) !important; }
html.dark .border-red-400      { border-color: rgba(239,68,68,0.45) !important; }
html.dark .bg-yellow-50        { background-color: rgba(245,158,11,0.10) !important; }
html.dark .border-yellow-200,
html.dark .border-yellow-300,
html.dark .border-yellow-400   { border-color: rgba(245,158,11,0.35) !important; }
html.dark .text-yellow-700,
html.dark .text-yellow-800,
html.dark .text-yellow-900     { color: #fcd34d !important; }
html.dark .bg-amber-100        { background-color: rgba(245,158,11,0.14) !important; }
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800      { color: #fcd34d !important; }

/* Shadows — re-tune for dark surfaces (light shadows disappear) */
html.dark .shadow-sm           { box-shadow: 0 1px 3px rgba(0,0,0,0.45) !important; }
html.dark .shadow-md           { box-shadow: 0 8px 22px -8px rgba(0,0,0,0.60),
                                              0 0 0 1px rgba(148,163,184,0.05) !important; }
html.dark .shadow-lg           { box-shadow: 0 18px 38px -12px rgba(0,0,0,0.65),
                                              0 0 0 1px rgba(148,163,184,0.05) !important; }

/* Form inputs */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: var(--fw-dark-surface-2) !important;
  color: var(--fw-dark-text) !important;
  border-color: var(--fw-dark-border-strong) !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--fw-brand-teal-2) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.18) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--fw-dark-text-dim) !important; }
html.dark select option         { background-color: var(--fw-dark-surface-2); color: var(--fw-dark-text); }
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled     { opacity: 0.4; }

/* Code/pre blocks — dark on dark, slightly brighter than surface */
html.dark code,
html.dark pre {
  background-color: rgba(0,0,0,0.30) !important;
  color: #cbd5e1 !important;
}

/* Hover-shadow tweaks (cards) */
html.dark .hover\:shadow-lg:hover {
  box-shadow: 0 18px 38px -12px rgba(0,0,0,0.70),
              0 0 0 1px rgba(13,148,136,0.35) !important;
}

/* ------------------------------------------------------------------
   DARK MODE: landing.css CSS-variable layer
   The landing page reads its own --gray-* tokens. Flipping them at
   the variable level transforms the entire landing-page UI in one
   place without touching landing.css itself.
   ------------------------------------------------------------------ */
html.dark {
  --gray-50:   #0a0e1a;
  --gray-100:  #11182b;
  --gray-200:  rgba(148,163,184,0.10);
  --gray-300:  rgba(148,163,184,0.18);
  --gray-400:  #475569;
  --gray-500:  #94a3b8;
  --gray-600:  #cbd5e1;
  --gray-700:  #cbd5e1;
  --gray-800:  #e2e8f0;
  --gray-900:  #f1f5f9;
}
/* landing.css hardcodes `background: white` on a number of component
   classes — a literal `white` is NOT reached by the --gray-* variable
   override above, so every one needs an explicit dark surface here.
   These are the cards/grids/buttons that were still painting white in
   dark mode. */

/* Surfaces — cards, panels, the comparison grid, the mobile menu */
html.dark .navbar,
html.dark .footer,
html.dark .tier-card,
html.dark .faq-item,
html.dark .pricing-card,
html.dark .feature-card,
html.dark .use-case-card,
html.dark .comparison-table,
html.dark .nav-links {
  background-color: var(--fw-dark-surface) !important;
  border-color: var(--fw-dark-border) !important;
}

/* Full-width sections that hardcode a white background */
html.dark .features-section,
html.dark .stats-section {
  background-color: var(--fw-dark-bg) !important;
}
html.dark .comparison-section,
html.dark .faq-section,
html.dark .testimonial-section,
html.dark .disclaimer-section {
  background-color: var(--fw-dark-bg) !important;
}
html.dark .hero {
  background: linear-gradient(135deg, #0a0e1a 0%, #11182b 100%) !important;
}

/* Comparison table internals */
html.dark .comparison-table th,
html.dark .comparison-table td { border-color: var(--fw-dark-border) !important; }
html.dark .comparison-table th { background-color: var(--fw-dark-surface-2) !important; color: var(--fw-dark-text-strong) !important; }
/* The "POPULAR" (PRO) column is highlighted with an inline
   background:#F0F9FF on each cell. Inline styles beat normal selectors,
   so target them by attribute and !important to a teal-tinted dark cell. */
html.dark .comparison-table th[style*="F0F9FF"],
html.dark .comparison-table td[style*="F0F9FF"] {
  background-color: rgba(13, 148, 136, 0.12) !important;
}

/* Secondary (outline) buttons — were white with a faint border. Give them
   a raised dark surface, readable text, and a visible outline + hover. */
html.dark .btn-secondary {
  background-color: var(--fw-dark-surface-2) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}
html.dark .btn-secondary:hover {
  background-color: #1d2740 !important;
  border-color: var(--fw-brand-teal) !important;
  color: var(--fw-dark-text-strong) !important;
}

/* Card hover shadow on dark needs the brand-teal hairline to read */
html.dark .feature-card:hover,
html.dark .use-case-card:hover,
html.dark .tier-card:hover {
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.65),
              0 0 0 1px rgba(13,148,136,0.30) !important;
}

/* ------------------------------------------------------------------
   Theme toggle button — a small icon-only switcher in the nav
   ------------------------------------------------------------------ */
.fw-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid transparent;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  position: relative;
}
.fw-theme-toggle:hover {
  background-color: rgba(148,163,184,0.10);
  color: var(--fw-brand-teal);
}
html.dark .fw-theme-toggle:hover {
  background-color: rgba(20,184,166,0.10);
  color: var(--fw-brand-teal-2);
}
.fw-theme-toggle svg { width: 18px; height: 18px; }
.fw-theme-toggle .icon-moon { display: inline; }
.fw-theme-toggle .icon-sun  { display: none; }
html.dark .fw-theme-toggle .icon-moon { display: none; }
html.dark .fw-theme-toggle .icon-sun  { display: inline; }
.fw-theme-toggle:focus-visible {
  outline: 2px solid var(--fw-brand-teal-2);
  outline-offset: 2px;
}
