/* ============================================================================
   Dark Mode Support for PneumaPsyche Legal Policies II
   Enhanced contrast handling: backgrounds darken, text lightens in dark mode
   Targets: html[data-theme="dark"], body[data-theme="dark"], .dark-mode
   ============================================================================ */

/* ============================================================================
   DARK MODE VARIABLES - Proper contrast ratios
   ============================================================================ */
html[data-theme="dark"] .pp-legal-page,
body[data-theme="dark"] .pp-legal-page,
[data-theme="dark"] .pp-legal-page,
.dark-mode .pp-legal-page {
    /* Background colors - progressively darker */
    --pp-legal-bg: #0a0b0d;              /* Darkest base */
    --pp-legal-bg-dark: #12141a;         /* Slightly lighter for contrast */
    --pp-legal-surface: #1a1d23;         /* Card surfaces */
    --pp-legal-surface-elevated: #242830; /* Elevated elements */
    --pp-legal-surface-hover: #2d3139;   /* Hover states */
    
    /* Text colors - progressively lighter for contrast */
    --pp-legal-text: #f5f5f5;            /* Primary text - very light */
    --pp-legal-text-secondary: #e0e0e0;  /* Secondary text */
    --pp-legal-text-muted: #b8b8b8;      /* Muted text */
    --pp-legal-text-light: #8a8a8a;      /* De-emphasized text */
    
    /* Border and divider colors */
    --pp-legal-border: #2d3139;
    --pp-legal-border-light: #363a42;
    
    /* Shadow colors - darker for depth */
    --pp-legal-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --pp-legal-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    
    /* Purple/accent colors - adjusted for dark mode */
    --pp-legal-purple: #a592f0;          /* Lighter purple for visibility */
    --pp-legal-purple-light: #b8a7f5;    /* Even lighter */
    --pp-legal-purple-dark: #8975d9;     /* Slightly darker for variety */
    
    /* Status colors - adjusted for dark backgrounds */
    --pp-legal-success: #4ade80;
    --pp-legal-warning: #fbbf24;
    --pp-legal-error: #f87171;
    --pp-legal-info: #60a5fa;
    
    background: var(--pp-legal-bg) !important;
    color: var(--pp-legal-text);
}

/* ============================================================================
   PAGE STRUCTURE
   ============================================================================ */

/* Page background - darkest */
html[data-theme="dark"] .pp-legal-page,
body[data-theme="dark"] .pp-legal-page,
[data-theme="dark"] .pp-legal-page,
.dark-mode .pp-legal-page {
    background: var(--pp-legal-bg) !important;
}

/* Hero section */
html[data-theme="dark"] .pp-legal-hero,
body[data-theme="dark"] .pp-legal-hero,
[data-theme="dark"] .pp-legal-hero,
.dark-mode .pp-legal-hero {
    background: linear-gradient(135deg, #1a1d23 0%, #242830 100%) !important;
}

html[data-theme="dark"] .pp-legal-hero h1,
body[data-theme="dark"] .pp-legal-hero h1,
[data-theme="dark"] .pp-legal-hero h1,
.dark-mode .pp-legal-hero h1 {
    color: var(--pp-legal-text) !important;
}

html[data-theme="dark"] .pp-legal-hero-subtitle,
body[data-theme="dark"] .pp-legal-hero-subtitle,
[data-theme="dark"] .pp-legal-hero-subtitle,
.dark-mode .pp-legal-hero-subtitle {
    color: var(--pp-legal-text-secondary) !important;
}

html[data-theme="dark"] .pp-legal-hero-meta-item,
body[data-theme="dark"] .pp-legal-hero-meta-item,
[data-theme="dark"] .pp-legal-hero-meta-item,
.dark-mode .pp-legal-hero-meta-item {
    color: var(--pp-legal-text-muted) !important;
}

/* ============================================================================
   CARDS AND CONTAINERS
   ============================================================================ */

/* Main cards - elevated surface */
html[data-theme="dark"] .pp-legal-card,
body[data-theme="dark"] .pp-legal-card,
[data-theme="dark"] .pp-legal-card,
.dark-mode .pp-legal-card {
    background: var(--pp-legal-surface) !important;
    box-shadow: var(--pp-legal-shadow-lg);
    border-color: var(--pp-legal-border);
}

/* Table of Contents */
html[data-theme="dark"] .pp-legal-toc,
body[data-theme="dark"] .pp-legal-toc,
[data-theme="dark"] .pp-legal-toc,
.dark-mode .pp-legal-toc {
    background: var(--pp-legal-surface-elevated) !important;
    border-color: var(--pp-legal-border) !important;
}

html[data-theme="dark"] .pp-legal-toc-title,
body[data-theme="dark"] .pp-legal-toc-title,
[data-theme="dark"] .pp-legal-toc-title,
.dark-mode .pp-legal-toc-title {
    color: var(--pp-legal-purple-light) !important;
}

html[data-theme="dark"] .pp-legal-toc-link,
body[data-theme="dark"] .pp-legal-toc-link,
[data-theme="dark"] .pp-legal-toc-link,
.dark-mode .pp-legal-toc-link {
    color: var(--pp-legal-text-secondary) !important;
}

html[data-theme="dark"] .pp-legal-toc-link:hover,
body[data-theme="dark"] .pp-legal-toc-link:hover,
[data-theme="dark"] .pp-legal-toc-link:hover,
.dark-mode .pp-legal-toc-link:hover {
    background: var(--pp-legal-surface-hover) !important;
    color: var(--pp-legal-purple-light) !important;
}

html[data-theme="dark"] .pp-legal-toc-number,
body[data-theme="dark"] .pp-legal-toc-number,
[data-theme="dark"] .pp-legal-toc-number,
.dark-mode .pp-legal-toc-number {
    background: var(--pp-legal-surface-hover) !important;
    color: var(--pp-legal-purple-light) !important;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

/* Section headers and text */
html[data-theme="dark"] .pp-legal-section,
body[data-theme="dark"] .pp-legal-section,
[data-theme="dark"] .pp-legal-section,
.dark-mode .pp-legal-section {
    border-bottom-color: var(--pp-legal-border) !important;
}

html[data-theme="dark"] .pp-legal-section h2,
body[data-theme="dark"] .pp-legal-section h2,
[data-theme="dark"] .pp-legal-section h2,
.dark-mode .pp-legal-section h2 {
    color: var(--pp-legal-text) !important;
}

html[data-theme="dark"] .pp-legal-section h3,
body[data-theme="dark"] .pp-legal-section h3,
[data-theme="dark"] .pp-legal-section h3,
.dark-mode .pp-legal-section h3 {
    color: var(--pp-legal-purple-light) !important;
}

html[data-theme="dark"] .pp-legal-section h4,
body[data-theme="dark"] .pp-legal-section h4,
[data-theme="dark"] .pp-legal-section h4,
.dark-mode .pp-legal-section h4 {
    color: var(--pp-legal-text-secondary) !important;
}

html[data-theme="dark"] .pp-legal-section p,
body[data-theme="dark"] .pp-legal-section p,
[data-theme="dark"] .pp-legal-section p,
.dark-mode .pp-legal-section p,
html[data-theme="dark"] .pp-legal-section li,
body[data-theme="dark"] .pp-legal-section li,
[data-theme="dark"] .pp-legal-section li,
.dark-mode .pp-legal-section li {
    color: var(--pp-legal-text-secondary) !important;
}

html[data-theme="dark"] .pp-legal-section-number,
body[data-theme="dark"] .pp-legal-section-number,
[data-theme="dark"] .pp-legal-section-number,
.dark-mode .pp-legal-section-number {
    background: var(--pp-legal-purple-dark) !important;
    color: var(--pp-legal-text) !important;
}

/* ============================================================================
   CALLOUTS AND ALERTS
   ============================================================================ */

html[data-theme="dark"] .pp-legal-callout,
body[data-theme="dark"] .pp-legal-callout,
[data-theme="dark"] .pp-legal-callout,
.dark-mode .pp-legal-callout {
    background: var(--pp-legal-surface-elevated) !important;
    border-color: var(--pp-legal-border-light) !important;
}

html[data-theme="dark"] .pp-legal-callout-title,
body[data-theme="dark"] .pp-legal-callout-title,
[data-theme="dark"] .pp-legal-callout-title,
.dark-mode .pp-legal-callout-title {
    color: var(--pp-legal-text) !important;
}

html[data-theme="dark"] .pp-legal-callout p,
body[data-theme="dark"] .pp-legal-callout p,
[data-theme="dark"] .pp-legal-callout p,
.dark-mode .pp-legal-callout p {
    color: var(--pp-legal-text-secondary) !important;
}

/* Important callout */
html[data-theme="dark"] .pp-legal-callout--important,
body[data-theme="dark"] .pp-legal-callout--important,
[data-theme="dark"] .pp-legal-callout--important,
.dark-mode .pp-legal-callout--important {
    background: rgba(165, 146, 240, 0.1) !important;
    border-color: var(--pp-legal-purple) !important;
}

html[data-theme="dark"] .pp-legal-callout--important .pp-legal-callout-title,
body[data-theme="dark"] .pp-legal-callout--important .pp-legal-callout-title,
[data-theme="dark"] .pp-legal-callout--important .pp-legal-callout-title,
.dark-mode .pp-legal-callout--important .pp-legal-callout-title {
    color: var(--pp-legal-purple-light) !important;
}

/* Warning callout */
html[data-theme="dark"] .pp-legal-callout--warning,
body[data-theme="dark"] .pp-legal-callout--warning,
[data-theme="dark"] .pp-legal-callout--warning,
.dark-mode .pp-legal-callout--warning {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: var(--pp-legal-warning) !important;
}

html[data-theme="dark"] .pp-legal-callout--warning .pp-legal-callout-title,
body[data-theme="dark"] .pp-legal-callout--warning .pp-legal-callout-title,
[data-theme="dark"] .pp-legal-callout--warning .pp-legal-callout-title,
.dark-mode .pp-legal-callout--warning .pp-legal-callout-title {
    color: var(--pp-legal-warning) !important;
}

/* Error callout */
html[data-theme="dark"] .pp-legal-callout--error,
body[data-theme="dark"] .pp-legal-callout--error,
[data-theme="dark"] .pp-legal-callout--error,
.dark-mode .pp-legal-callout--error {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: var(--pp-legal-error) !important;
}

html[data-theme="dark"] .pp-legal-callout--error .pp-legal-callout-title,
body[data-theme="dark"] .pp-legal-callout--error .pp-legal-callout-title,
[data-theme="dark"] .pp-legal-callout--error .pp-legal-callout-title,
.dark-mode .pp-legal-callout--error .pp-legal-callout-title {
    color: var(--pp-legal-error) !important;
}

/* Info callout */
html[data-theme="dark"] .pp-legal-callout--info,
body[data-theme="dark"] .pp-legal-callout--info,
[data-theme="dark"] .pp-legal-callout--info,
.dark-mode .pp-legal-callout--info {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: var(--pp-legal-info) !important;
}

html[data-theme="dark"] .pp-legal-callout--info .pp-legal-callout-title,
body[data-theme="dark"] .pp-legal-callout--info .pp-legal-callout-title,
[data-theme="dark"] .pp-legal-callout--info .pp-legal-callout-title,
.dark-mode .pp-legal-callout--info .pp-legal-callout-title {
    color: var(--pp-legal-info) !important;
}

/* ============================================================================
   LISTS
   ============================================================================ */

html[data-theme="dark"] .pp-legal-list li,
body[data-theme="dark"] .pp-legal-list li,
[data-theme="dark"] .pp-legal-list li,
.dark-mode .pp-legal-list li {
    border-color: var(--pp-legal-border) !important;
    color: var(--pp-legal-text-secondary) !important;
}

html[data-theme="dark"] .pp-legal-list li::before,
body[data-theme="dark"] .pp-legal-list li::before,
[data-theme="dark"] .pp-legal-list li::before,
.dark-mode .pp-legal-list li::before {
    color: var(--pp-legal-purple-light) !important;
}

/* ============================================================================
   FORMS
   ============================================================================ */

html[data-theme="dark"] .pp-legal-form-group input,
body[data-theme="dark"] .pp-legal-form-group input,
[data-theme="dark"] .pp-legal-form-group input,
.dark-mode .pp-legal-form-group input,
html[data-theme="dark"] .pp-legal-form-group textarea,
body[data-theme="dark"] .pp-legal-form-group textarea,
[data-theme="dark"] .pp-legal-form-group textarea,
.dark-mode .pp-legal-form-group textarea,
html[data-theme="dark"] .pp-legal-form-group select,
body[data-theme="dark"] .pp-legal-form-group select,
[data-theme="dark"] .pp-legal-form-group select,
.dark-mode .pp-legal-form-group select {
    background: var(--pp-legal-surface-elevated) !important;
    border-color: var(--pp-legal-border) !important;
    color: var(--pp-legal-text) !important;
}

html[data-theme="dark"] .pp-legal-form-group input:focus,
body[data-theme="dark"] .pp-legal-form-group input:focus,
[data-theme="dark"] .pp-legal-form-group input:focus,
.dark-mode .pp-legal-form-group input:focus,
html[data-theme="dark"] .pp-legal-form-group textarea:focus,
body[data-theme="dark"] .pp-legal-form-group textarea:focus,
[data-theme="dark"] .pp-legal-form-group textarea:focus,
.dark-mode .pp-legal-form-group textarea:focus,
html[data-theme="dark"] .pp-legal-form-group select:focus,
body[data-theme="dark"] .pp-legal-form-group select:focus,
[data-theme="dark"] .pp-legal-form-group select:focus,
.dark-mode .pp-legal-form-group select:focus {
    border-color: var(--pp-legal-purple-light) !important;
    box-shadow: 0 0 0 3px rgba(165, 146, 240, 0.2) !important;
}

html[data-theme="dark"] .pp-legal-form-group label,
body[data-theme="dark"] .pp-legal-form-group label,
[data-theme="dark"] .pp-legal-form-group label,
.dark-mode .pp-legal-form-group label {
    color: var(--pp-legal-text) !important;
}

/* Placeholder text */
html[data-theme="dark"] .pp-legal-form-group input::placeholder,
body[data-theme="dark"] .pp-legal-form-group input::placeholder,
[data-theme="dark"] .pp-legal-form-group input::placeholder,
.dark-mode .pp-legal-form-group input::placeholder,
html[data-theme="dark"] .pp-legal-form-group textarea::placeholder,
body[data-theme="dark"] .pp-legal-form-group textarea::placeholder,
[data-theme="dark"] .pp-legal-form-group textarea::placeholder,
.dark-mode .pp-legal-form-group textarea::placeholder {
    color: var(--pp-legal-text-light) !important;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

html[data-theme="dark"] .pp-legal-btn,
body[data-theme="dark"] .pp-legal-btn,
[data-theme="dark"] .pp-legal-btn,
.dark-mode .pp-legal-btn {
    background: var(--pp-legal-purple) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .pp-legal-btn:hover,
body[data-theme="dark"] .pp-legal-btn:hover,
[data-theme="dark"] .pp-legal-btn:hover,
.dark-mode .pp-legal-btn:hover {
    background: var(--pp-legal-purple-light) !important;
}

html[data-theme="dark"] .pp-legal-btn--secondary,
body[data-theme="dark"] .pp-legal-btn--secondary,
[data-theme="dark"] .pp-legal-btn--secondary,
.dark-mode .pp-legal-btn--secondary {
    background: var(--pp-legal-surface-elevated) !important;
    color: var(--pp-legal-text) !important;
    border-color: var(--pp-legal-border) !important;
}

html[data-theme="dark"] .pp-legal-btn--secondary:hover,
body[data-theme="dark"] .pp-legal-btn--secondary:hover,
[data-theme="dark"] .pp-legal-btn--secondary:hover,
.dark-mode .pp-legal-btn--secondary:hover {
    background: var(--pp-legal-surface-hover) !important;
}

/* ============================================================================
   COOKIE BANNER
   ============================================================================ */

html[data-theme="dark"] .pp-legal-cookie-banner,
body[data-theme="dark"] .pp-legal-cookie-banner,
[data-theme="dark"] .pp-legal-cookie-banner,
.dark-mode .pp-legal-cookie-banner {
    background: var(--pp-legal-surface) !important;
    border-color: var(--pp-legal-border) !important;
    box-shadow: var(--pp-legal-shadow-lg);
}

html[data-theme="dark"] .pp-legal-cookie-banner p,
body[data-theme="dark"] .pp-legal-cookie-banner p,
[data-theme="dark"] .pp-legal-cookie-banner p,
.dark-mode .pp-legal-cookie-banner p {
    color: var(--pp-legal-text-secondary) !important;
}

html[data-theme="dark"] .pp-legal-cookie-banner a,
body[data-theme="dark"] .pp-legal-cookie-banner a,
[data-theme="dark"] .pp-legal-cookie-banner a,
.dark-mode .pp-legal-cookie-banner a {
    color: var(--pp-legal-purple-light) !important;
}

/* ============================================================================
   TABLES
   ============================================================================ */

html[data-theme="dark"] .pp-legal-table,
body[data-theme="dark"] .pp-legal-table,
[data-theme="dark"] .pp-legal-table,
.dark-mode .pp-legal-table {
    background: var(--pp-legal-surface) !important;
}

html[data-theme="dark"] .pp-legal-table th,
body[data-theme="dark"] .pp-legal-table th,
[data-theme="dark"] .pp-legal-table th,
.dark-mode .pp-legal-table th {
    background: var(--pp-legal-surface-elevated) !important;
    color: var(--pp-legal-text) !important;
    border-color: var(--pp-legal-border) !important;
}

html[data-theme="dark"] .pp-legal-table td,
body[data-theme="dark"] .pp-legal-table td,
[data-theme="dark"] .pp-legal-table td,
.dark-mode .pp-legal-table td {
    color: var(--pp-legal-text-secondary) !important;
    border-color: var(--pp-legal-border) !important;
}

html[data-theme="dark"] .pp-legal-table tr:hover,
body[data-theme="dark"] .pp-legal-table tr:hover,
[data-theme="dark"] .pp-legal-table tr:hover,
.dark-mode .pp-legal-table tr:hover {
    background: var(--pp-legal-surface-hover) !important;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

html[data-theme="dark"] .pp-legal-footer,
body[data-theme="dark"] .pp-legal-footer,
[data-theme="dark"] .pp-legal-footer,
.dark-mode .pp-legal-footer {
    background: var(--pp-legal-surface) !important;
    border-color: var(--pp-legal-border) !important;
}

html[data-theme="dark"] .pp-legal-footer p,
body[data-theme="dark"] .pp-legal-footer p,
[data-theme="dark"] .pp-legal-footer p,
.dark-mode .pp-legal-footer p {
    color: var(--pp-legal-text-muted) !important;
}

html[data-theme="dark"] .pp-legal-footer a,
body[data-theme="dark"] .pp-legal-footer a,
[data-theme="dark"] .pp-legal-footer a,
.dark-mode .pp-legal-footer a {
    color: var(--pp-legal-purple-light) !important;
}

html[data-theme="dark"] .pp-legal-footer a:hover,
body[data-theme="dark"] .pp-legal-footer a:hover,
[data-theme="dark"] .pp-legal-footer a:hover,
.dark-mode .pp-legal-footer a:hover {
    color: var(--pp-legal-text) !important;
}

/* ============================================================================
   LINKS
   ============================================================================ */

html[data-theme="dark"] a,
body[data-theme="dark"] a,
[data-theme="dark"] a,
.dark-mode a {
    color: var(--pp-legal-purple-light) !important;
}

html[data-theme="dark"] a:hover,
body[data-theme="dark"] a:hover,
[data-theme="dark"] a:hover,
.dark-mode a:hover {
    color: var(--pp-legal-text) !important;
}