/*
 * Royal Plugins Tools — shared dark mode + copy button styles
 *
 * Palette contrast reasoning (WCAG AA requires 4.5:1 body, 3:1 large text):
 *   body text  #f0ebe0 on #1a1a1a  → 16:1  (AAA)
 *   muted text #a8a090 on #1a1a1a  → 7.5:1 (AAA)
 *   gold link  #d4b13d on #1a1a1a  → 7.5:1 (AAA)
 *   gold btn bg #d4b13d + dark text #1a1a1a → 8.3:1 (AAA)
 *   success   #4ade80 on #1a1a1a  → 10.7:1
 *   warning   #fbbf24 on #1a1a1a  → 11.2:1
 *   danger    #f87171 on #1a1a1a  → 6.2:1  (AA+)
 *
 * We prefer warm off-white (#f0ebe0) over pure white — matches the
 * existing cream/charcoal brand, less harsh at night.
 */

:root { color-scheme: light; }

[data-theme="dark"] {
    /* ── Override brand variables (most tools already use these) ── */
    --cream: #1a1a1a;
    --white: #232323;
    --charcoal: #f0ebe0;
    --charcoal-light: #d4cdbd;
    --charcoal-muted: #a8a090;
    --border-light: rgba(240, 235, 224, 0.14);

    --gold: #d4b13d;                /* shifted lighter — original #C9A227 is too dark on dark bg */
    --gold-light: #e0c15a;
    --gold-dark: #C9A227;
    --gold-subtle: rgba(212, 177, 61, 0.14);

    --green: #4ade80;
    --red: #f87171;
    --blue: #60a5fa;

    color-scheme: dark;
}

/* ── Body + page baseline ── */
[data-theme="dark"] body {
    background: #1a1a1a;
    color: #f0ebe0;
}

/* ── Re-scope brand vars inside sections that are already dark in light mode ──
   The site nav, .page-header heroes, mobile menus, and footer are all authored
   as dark surfaces (`background: var(--charcoal)`) with light text
   (`color: var(--white)`). The global flip above inverts both, which fights
   the original intent. Rolling the vars back inside these regions keeps them
   looking identical in both themes — no override tug-of-war. */
[data-theme="dark"] nav,
[data-theme="dark"] .mobile-menu,
[data-theme="dark"] .page-header,
[data-theme="dark"] .cta-section,
[data-theme="dark"] .cta,
[data-theme="dark"] section.cta-section,
[data-theme="dark"] footer,
[data-theme="dark"] section[style*="linear-gradient"],
[data-theme="dark"] section[style*="var(--charcoal)"],
[data-theme="dark"] [style*="background:var(--charcoal)"],
[data-theme="dark"] [style*="background: var(--charcoal)"] {
    --cream: #FAF8F5;
    --white: #FFFFFF;
    --charcoal: #2C2C2C;
    --charcoal-light: #4A4A4A;
    --charcoal-muted: #6B6B6B;
    --border-light: rgba(44, 44, 44, 0.08);
    --gold: #C9A227;
    --gold-light: #D4B13D;
    --gold-dark: #A88B1F;
    --gold-subtle: rgba(201, 162, 39, 0.08);
}

/* ── Nav dropdown popups ──
   Dropdowns + mega-menus live inside the re-scoped <nav>, so they inherit
   the light-mode vars we rolled back. That renders them as white-on-dark-page
   — jarring. Explicitly darken these popups so they blend with the page. */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .mega-menu,
[data-theme="dark"] .subnav-dropdown-menu {
    background: #232323 !important;
    border-color: rgba(240, 235, 224, 0.14) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}
[data-theme="dark"] .dropdown-menu a,
[data-theme="dark"] .mega-menu a,
[data-theme="dark"] .subnav-dropdown-menu a,
[data-theme="dark"] .mega-col a {
    color: #d4cdbd !important;
}
[data-theme="dark"] .dropdown-menu a:hover,
[data-theme="dark"] .mega-menu a:hover,
[data-theme="dark"] .subnav-dropdown-menu a:hover,
[data-theme="dark"] .mega-col a:hover {
    background: rgba(212, 177, 61, 0.14) !important;
    color: #e0c15a !important;
}
[data-theme="dark"] .mega-col h5 {
    color: #d4b13d !important;
    border-color: rgba(240, 235, 224, 0.12) !important;
}

/* ── Inputs — the single biggest "blending" culprit in dark mode.
     We target ALL user-editable surfaces and ensure they're clearly
     distinct from the page background. ── */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #0f0f0f !important;
    color: #f0ebe0 !important;
    border-color: rgba(240, 235, 224, 0.20) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #8f8776 !important;
    opacity: 1;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: #d4b13d !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 177, 61, 0.18) !important;
}

/* ── Code / pre blocks (common in schema validator & scanners) ── */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: #0d0d0d !important;
    color: #e8e3d4 !important;
    border-color: rgba(240, 235, 224, 0.10) !important;
}

/* ── Pale status backgrounds (e.g. #fef2f2 red-50 for fail cards) ──
   Inline styles are common across these tools; we intercept the most
   frequent pale hexes and swap for tinted dark variants. The tint of
   the status color (green/amber/red/blue) stays visible without
   fighting the user's eyes. ── */
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"],
[data-theme="dark"] [style*="background:#fecaca"],
[data-theme="dark"] [style*="background: #fecaca"] {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
}
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fff7ed"],
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"] {
    background: rgba(234, 179, 8, 0.10) !important;
    border-color: rgba(234, 179, 8, 0.26) !important;
}
[data-theme="dark"] [style*="background:#fefce8"],
[data-theme="dark"] [style*="background: #fefce8"] {
    background: rgba(234, 179, 8, 0.08) !important;
    border-color: rgba(234, 179, 8, 0.24) !important;
}
[data-theme="dark"] [style*="background:#ecfdf5"],
[data-theme="dark"] [style*="background: #ecfdf5"],
[data-theme="dark"] [style*="background:#d1fae5"],
[data-theme="dark"] [style*="background: #d1fae5"] {
    background: rgba(34, 197, 94, 0.10) !important;
    border-color: rgba(34, 197, 94, 0.26) !important;
}
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background: #eff6ff"],
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background: #dbeafe"] {
    background: rgba(96, 165, 250, 0.10) !important;
    border-color: rgba(96, 165, 250, 0.26) !important;
}
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f1f3f4"],
[data-theme="dark"] [style*="background: #f1f3f4"] {
    background: #1f1f1f !important;
    border-color: rgba(240, 235, 224, 0.10) !important;
}

/* Inline white / cream backgrounds used for cards — swap to card color */
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background:#FAF8F5"],
[data-theme="dark"] [style*="background: #FAF8F5"] {
    background: #232323 !important;
}

/* Dark page bg explicitly used (e.g. #1a1a2e in some tool page-headers) —
   keep as dark-on-dark since the author already intended dark. */

/* Status text colors that need to shift for readability on dark ── */
[data-theme="dark"] [style*="color:#16a34a"],
[data-theme="dark"] [style*="color: #16a34a"] { color: #4ade80 !important; }
[data-theme="dark"] [style*="color:#22c55e"],
[data-theme="dark"] [style*="color: #22c55e"] { color: #4ade80 !important; }
[data-theme="dark"] [style*="color:#dc2626"],
[data-theme="dark"] [style*="color: #dc2626"] { color: #f87171 !important; }
[data-theme="dark"] [style*="color:#ef4444"],
[data-theme="dark"] [style*="color: #ef4444"] { color: #f87171 !important; }
[data-theme="dark"] [style*="color:#991b1b"],
[data-theme="dark"] [style*="color: #991b1b"] { color: #fca5a5 !important; }
[data-theme="dark"] [style*="color:#eab308"],
[data-theme="dark"] [style*="color: #eab308"] { color: #fbbf24 !important; }
[data-theme="dark"] [style*="color:#ca8a04"],
[data-theme="dark"] [style*="color: #ca8a04"] { color: #fbbf24 !important; }
[data-theme="dark"] [style*="color:#f97316"],
[data-theme="dark"] [style*="color: #f97316"] { color: #fb923c !important; }
[data-theme="dark"] [style*="color:#2C2C2C"],
[data-theme="dark"] [style*="color: #2C2C2C"] { color: #f0ebe0 !important; }
[data-theme="dark"] [style*="color:#4A4A4A"],
[data-theme="dark"] [style*="color: #4A4A4A"] { color: #d4cdbd !important; }
[data-theme="dark"] [style*="color:#6B6B6B"],
[data-theme="dark"] [style*="color: #6B6B6B"] { color: #a8a090 !important; }

/* Borders shouldn't be pure dark lines in dark mode */
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #d1d5db"],
[data-theme="dark"] [style*="border:1px solid #d1d5db"],
[data-theme="dark"] [style*="border: 1px solid #f3f4f6"] {
    border-color: rgba(240, 235, 224, 0.14) !important;
}

/* Scrollbars — make them blend */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px; height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1a1a;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(240, 235, 224, 0.14);
    border-radius: 5px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(240, 235, 224, 0.24);
}

/* Selection highlight */
[data-theme="dark"] ::selection {
    background: rgba(212, 177, 61, 0.35);
    color: #f0ebe0;
}

/* ── Theme toggle button ── */
.rp-theme-toggle {
    position: fixed;
    top: 86px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white, #ffffff);
    border: 1px solid var(--border-light, rgba(44, 44, 44, 0.12));
    color: var(--charcoal, #2C2C2C);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.2s ease;
}
.rp-theme-toggle:hover {
    background: var(--gold-subtle, rgba(201, 162, 39, 0.08));
    transform: scale(1.05);
}
.rp-theme-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rp-theme-toggle .rp-icon-moon { display: none; }
[data-theme="dark"] .rp-theme-toggle .rp-icon-sun { display: none; }
[data-theme="dark"] .rp-theme-toggle .rp-icon-moon { display: block; }
[data-theme="dark"] .rp-theme-toggle {
    background: #232323;
    border-color: rgba(240, 235, 224, 0.18);
    color: #f0ebe0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ── Copy button ── */
/* Report-level copy button container (shown at top of results).
   Padding-top clears the fixed site nav when tools scrollIntoView the results. */
.rp-report-actions {
    display: flex;
    justify-content: flex-end;
    padding: 6rem 5% 1rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .rp-report-actions { padding-top: 5rem; }
}

.rp-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border-light, rgba(44, 44, 44, 0.14));
    color: var(--charcoal, #2C2C2C);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.rp-copy-btn:hover {
    background: var(--gold-subtle, rgba(201, 162, 39, 0.08));
    border-color: var(--gold, #C9A227);
    color: var(--gold-dark, #A88B1F);
}
.rp-copy-btn svg {
    width: 14px; height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.rp-copy-btn.rp-copied {
    background: rgba(34, 197, 94, 0.14);
    border-color: #22c55e;
    color: #16a34a;
}
[data-theme="dark"] .rp-copy-btn { color: #d4cdbd; }
[data-theme="dark"] .rp-copy-btn:hover {
    background: rgba(212, 177, 61, 0.14);
    border-color: #d4b13d;
    color: #e0c15a;
}
[data-theme="dark"] .rp-copy-btn.rp-copied {
    background: rgba(74, 222, 128, 0.18);
    border-color: #4ade80;
    color: #86efac;
}