/* ═══════════════════════════════════════════════════════
   rdx-theme.css — ReasonDx Unified Design System
   ═══════════════════════════════════════════════════════ */

/* ─── Light Theme (default) ─── */
:root,
[data-theme="light"] {
  --rdx-bg: #f0f4f8;
  --rdx-bg-card: #ffffff;
  --rdx-bg-nav: #ffffff;
  --rdx-bg-hover: #f8fafc;
  --rdx-text: #1e293b;
  --rdx-text-secondary: #475569;
  --rdx-text-muted: #64748b;
  --rdx-text-dim: #94a3b8;
  --rdx-border: #e2e8f0;
  --rdx-border-hover: #cbd5e1;

  /* Brand */
  --rdx-blue: #2874A6;
  --rdx-blue-dark: #1B4F72;
  --rdx-blue-light: #EBF5FB;
  --rdx-blue-bg: rgba(40,116,166,.06);
  --rdx-blue-border: rgba(40,116,166,.15);
  --rdx-accent: #3498DB;

  /* Semantic */
  --rdx-success: #059669;
  --rdx-success-bg: #E8F8F0;
  --rdx-warning: #D97706;
  --rdx-warning-bg: #FEF9E7;
  --rdx-danger: #DC2626;
  --rdx-danger-bg: #FDEDEC;
  --rdx-purple: #7C3AED;
  --rdx-pink: #EC4899;
  --rdx-amber: #D97706;

  /* Typography */
  --rdx-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rdx-font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
  --rdx-font-serif: Georgia, 'Times New Roman', serif;

  /* Spacing */
  --rdx-radius-sm: 8px;
  --rdx-radius-md: 12px;
  --rdx-radius-lg: 16px;
  --rdx-radius-xl: 20px;

  /* Shadows */
  --rdx-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --rdx-shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --rdx-shadow-lg: 0 8px 32px rgba(0,0,0,.1);
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
  --rdx-bg: #0f172a;
  --rdx-bg-card: #1e293b;
  --rdx-bg-nav: #1e293b;
  --rdx-bg-hover: #253347;
  --rdx-text: #e2e8f0;
  --rdx-text-secondary: #94a3b8;
  --rdx-text-muted: #64748b;
  --rdx-text-dim: #475569;
  --rdx-border: #334155;
  --rdx-border-hover: #475569;

  --rdx-blue: #5ba3cc;
  --rdx-blue-dark: #2874A6;
  --rdx-blue-light: rgba(40,116,166,.15);
  --rdx-blue-bg: rgba(40,116,166,.1);
  --rdx-blue-border: rgba(91,163,204,.2);
  --rdx-accent: #7cb8d9;

  --rdx-success: #34d399;
  --rdx-success-bg: rgba(5,150,105,.12);
  --rdx-warning: #fbbf24;
  --rdx-warning-bg: rgba(217,119,6,.12);
  --rdx-danger: #f87171;
  --rdx-danger-bg: rgba(220,38,38,.12);

  --rdx-shadow-sm: 0 1px 3px rgba(0,0,0,.2);
  --rdx-shadow-md: 0 4px 16px rgba(0,0,0,.3);
  --rdx-shadow-lg: 0 8px 32px rgba(0,0,0,.4);
}

/* ─── Skip-to-content ─── */
.rdx-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 99999;
  background: var(--rdx-blue, #2874A6);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--rdx-font, 'IBM Plex Sans', sans-serif);
  text-decoration: none;
  transition: top .15s;
}
.rdx-skip-link:focus {
  top: 0;
  outline: 3px solid var(--rdx-accent, #3498DB);
  outline-offset: 2px;
}

/* ─── Global resets ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ─── Print Styles ─── */
@media print {
  #rdx-unified-nav,
  .rdx-skip-link,
  .rdx-nav-btn,
  #rdx-about-overlay,
  .rdx-help-widget,
  noscript div,
  button,
  .btn-primary,
  .btn-ghost {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }

  .card,
  .feature-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }
}

/* ─── Focus Styles (Accessibility) ─── */
:focus-visible {
  outline: 3px solid var(--rdx-blue, #2874A6);
  outline-offset: 2px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--rdx-blue, #2874A6);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}