/**
 * PharmData Design System - Dark Mode Global Styles
 *
 * Este arquivo adiciona suporte a dark mode para páginas que usam
 * CSS puro com variáveis do Design System.
 *
 * Include AFTER colors.css:
 * <link rel="stylesheet" href="./tokens/colors.css">
 * <link rel="stylesheet" href="./tokens/dark-mode.css">
 */

/* ========================================
   SMOOTH TRANSITIONS
   Performance-optimized: Only apply transitions
   to elements that actually change during theme switch
   ======================================== */

html {
    transition: background-color 0.3s ease;
}

/* Targeted transitions for common theme-switching elements */
body,
.card,
.example-card,
.btn,
.form-input,
.form-select,
.form-textarea,
.table,
.ds-header,
.ds-footer,
.ds-nav-link,
.ds-card,
.modal-content,
.toast,
.alert,
.accordion-item,
.tab,
.breadcrumb-link {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

/* ========================================
   BODY & BACKGROUNDS
   ======================================== */

:root.dark-mode body {
    background-color: var(--cloud);
    color: var(--graphite-depth);
}

/* White backgrounds become dark */
:root.dark-mode .example-card,
:root.dark-mode .card,
:root.dark-mode [style*="background: white"],
:root.dark-mode [style*="background:white"] {
    background-color: var(--arctic-mist) !important;
}

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

:root.dark-mode h1,
:root.dark-mode h2,
:root.dark-mode h3,
:root.dark-mode h4,
:root.dark-mode h5,
:root.dark-mode h6 {
    color: var(--graphite-depth);
}

:root.dark-mode p {
    color: var(--soft-steel);
}

/* Section titles using emerald-abyss in light mode */
:root.dark-mode .section-title,
:root.dark-mode .example-name,
:root.dark-mode [style*="color: var(--emerald-abyss)"] {
    color: var(--emerald-abyss) !important;
}

/* ========================================
   CARDS
   ======================================== */

:root.dark-mode .example-card {
    background: var(--arctic-mist);
    border-color: rgba(183, 228, 213, 0.2);
    color: var(--graphite-depth);
}

:root.dark-mode .example-card:hover {
    border-color: var(--teal-intense);
}

:root.dark-mode .example-thumbnail {
    background: linear-gradient(135deg, rgba(183, 228, 213, 0.08) 0%, rgba(61, 201, 189, 0.08) 100%);
}

:root.dark-mode .example-desc {
    color: var(--soft-steel);
}

:root.dark-mode .example-badge {
    background: rgba(61, 201, 189, 0.15);
    color: var(--teal-intense);
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

:root.dark-mode header {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

:root.dark-mode footer {
    background: #0d1117;
}

/* ========================================
   HERO SECTIONS
   ======================================== */

:root.dark-mode .hero {
    background: linear-gradient(135deg, #0d1117 0%, #1a2332 100%);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select {
    background-color: var(--arctic-mist);
    color: var(--graphite-depth);
    border-color: rgba(183, 228, 213, 0.2);
}

:root.dark-mode input::placeholder,
:root.dark-mode textarea::placeholder {
    color: var(--soft-steel);
}

:root.dark-mode input:focus,
:root.dark-mode textarea:focus,
:root.dark-mode select:focus {
    border-color: var(--teal-intense);
    box-shadow: 0 0 0 3px rgba(61, 201, 189, 0.2);
}

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

:root.dark-mode a:not([class]) {
    color: var(--teal-intense);
}

:root.dark-mode a:not([class]):hover {
    color: #5dd8cd;
}

/* ========================================
   CODE BLOCKS
   ======================================== */

:root.dark-mode code,
:root.dark-mode pre {
    background-color: var(--soft-arctic);
    color: var(--graphite-depth);
}

/* ========================================
   STATS/METRIC CARDS (inline styles override)
   ======================================== */

:root.dark-mode div[style*="background: white"] {
    background: var(--arctic-mist) !important;
}

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

:root.dark-mode button,
:root.dark-mode .btn {
    transition: all 0.2s ease;
}

:root.dark-mode .btn-secondary,
:root.dark-mode button[class*="secondary"] {
    background: var(--arctic-mist);
    border-color: rgba(183, 228, 213, 0.2);
    color: var(--graphite-depth);
}

/* ========================================
   SHADOWS (more subtle in dark mode)
   ======================================== */

:root.dark-mode [style*="shadow"] {
    box-shadow: var(--shadow-md);
}

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

:root.dark-mode table {
    background-color: var(--arctic-mist);
}

:root.dark-mode th {
    background-color: var(--soft-arctic);
    color: var(--soft-steel);
}

:root.dark-mode td {
    color: var(--graphite-depth);
    border-color: rgba(183, 228, 213, 0.1);
}

:root.dark-mode tr:hover {
    background-color: rgba(183, 228, 213, 0.05);
}

/* ========================================
   BORDERS
   ======================================== */

:root.dark-mode [style*="border-bottom: 3px solid var(--teal-intense)"] {
    border-color: var(--teal-intense) !important;
}

:root.dark-mode hr {
    border-color: rgba(183, 228, 213, 0.15);
}