/*
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: styles/dark-mode/dark-mode-utilities.css                    ║
║  Purpose: Reusable dark mode patterns and component utilities      ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                      ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. Focus & Interactive States
  2. Button Utilities
  3. Card & Container Utilities
  4. Text & Typography Utilities
  5. Background & Color Utilities
  6. Border & Shadow Utilities
  7. Layout & Spacing Utilities
*/

@media (prefers-color-scheme: dark) {
    /* ========================================== */
    /* 1. FOCUS & INTERACTIVE STATES UTILITIES */
    /* ========================================== */

    .dm-focus-ring {
        box-shadow: var(--dm-focus-ring) !important;
    }

    .dm-focus-ring-strong {
        box-shadow: var(--dm-focus-ring-strong) !important;
    }

    input.dm-focus-visible:focus,
    textarea.dm-focus-visible:focus,
    select.dm-focus-visible:focus {
        background-color: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-color-primary) !important;
        box-shadow: var(--dm-focus-ring) !important;
        outline: none;
    }

    /* ========================================== */
    /* BUTTON STATE UTILITIES                     */
    /* ========================================== */

    .btn-ghost {
        background-color: transparent !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .btn-ghost:hover {
        background-color: var(--dm-primary-opacity-10) !important;
        border-color: var(--dm-color-primary) !important;
    }

    .btn-text {
        background-color: transparent !important;
        border: none !important;
        color: var(--dm-accent-gold) !important;
    }

    .btn-text:hover {
        color: var(--dm-accent-gold-hover) !important;
    }

    /* ========================================== */
    /* TEXT & COLOR UTILITIES                     */
    /* ========================================== */

    .dm-text-primary {
        color: var(--dm-text-primary) !important;
    }

    .dm-text-secondary {
        color: var(--dm-text-secondary) !important;
    }

    .dm-text-muted {
        color: var(--dm-text-muted) !important;
    }

    .dm-text-accent {
        color: var(--dm-accent-gold) !important;
    }

    .dm-text-brand {
        color: var(--dm-color-primary) !important;
    }

    .dm-text-light {
        color: #ffffff !important;
    }

    .dm-bg-page {
        background-color: var(--dm-bg-page) !important;
    }

    .dm-bg-card {
        background-color: var(--dm-bg-card) !important;
    }

    .dm-bg-card-secondary {
        background-color: var(--dm-bg-card-secondary) !important;
    }

    .dm-bg-transparent {
        background-color: transparent !important;
    }

    /* ========================================== */
    /* BORDER UTILITIES                           */
    /* ========================================== */

    .dm-border-primary {
        border-color: var(--dm-border-primary) !important;
    }

    .dm-border-secondary {
        border-color: var(--dm-border-secondary) !important;
    }

    .dm-border-brand {
        border-color: var(--dm-color-primary) !important;
    }

    /* ========================================== */
    /* SHADOW UTILITIES                           */
    /* ========================================== */

    .dm-shadow-xs {
        box-shadow: var(--dm-shadow-xs) !important;
    }

    .dm-shadow-sm {
        box-shadow: var(--dm-shadow-sm) !important;
    }

    .dm-shadow-md {
        box-shadow: var(--dm-shadow-md) !important;
    }

    .dm-shadow-lg {
        box-shadow: var(--dm-shadow-lg) !important;
    }

    .dm-shadow-xl {
        box-shadow: var(--dm-shadow-xl) !important;
    }

    .dm-shadow-none {
        box-shadow: none !important;
    }

    /* ========================================== */
    /* FORM GROUP STYLING                         */
    /* ========================================== */

    .dm-form-group {
        margin-bottom: 1rem;
    }

    .dm-form-group label {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--dm-text-primary) !important;
        font-weight: 500;
    }

    .dm-form-group input,
    .dm-form-group textarea,
    .dm-form-group select {
        width: 100%;
        padding: 0.75rem;
        background-color: var(--dm-bg-card-secondary) !important;
        border: 1px solid var(--dm-border-primary) !important;
        border-radius: 0.375rem;
        color: var(--dm-text-primary) !important;
        font-size: 1rem;
    }

    .dm-form-group input:focus,
    .dm-form-group textarea:focus,
    .dm-form-group select:focus {
        background-color: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-color-primary) !important;
        box-shadow: var(--dm-focus-ring) !important;
        outline: none;
    }

    .dm-form-group .help-text {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: var(--dm-text-muted) !important;
    }

    /* ========================================== */
    /* NOTIFICATION & TOAST STYLING              */
    /* ========================================== */

    .dm-notification {
        background-color: var(--dm-bg-card) !important;
        border: 1px solid var(--dm-border-primary) !important;
        border-radius: 0.375rem;
        padding: 1rem;
        box-shadow: var(--dm-shadow-md) !important;
    }

    .dm-notification-success {
        background-color: rgba(76, 175, 80, 0.1) !important;
        border-color: var(--dm-status-success) !important;
        color: #81c784 !important;
    }

    .dm-notification-error {
        background-color: rgba(211, 47, 47, 0.1) !important;
        border-color: var(--dm-status-danger) !important;
        color: var(--dm-status-error) !important;
    }

    .dm-notification-warning {
        background-color: rgba(255, 152, 0, 0.1) !important;
        border-color: var(--dm-status-warning) !important;
        color: #ffb74d !important;
    }

    .dm-notification-info {
        background-color: rgba(33, 150, 243, 0.1) !important;
        border-color: var(--dm-status-info) !important;
        color: #64b5f6 !important;
    }

    /* ========================================== */
    /* CARD COMPONENTS                            */
    /* ========================================== */

    .dm-card {
        background-color: var(--dm-bg-card) !important;
        border: 1px solid var(--dm-border-primary) !important;
        border-radius: 0.375rem;
        box-shadow: var(--dm-shadow-sm) !important;
        transition: box-shadow 0.2s ease;
    }

    .dm-card:hover {
        box-shadow: var(--dm-shadow-hover) !important;
    }

    .dm-card-header {
        padding: 1rem;
        background-color: var(--dm-bg-card) !important;
        border-bottom: 1px solid var(--dm-border-primary) !important;
        color: #ffffff !important;
        font-weight: 600;
    }

    .dm-card-body {
        padding: 1rem;
        background-color: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
    }

    .dm-card-footer {
        padding: 1rem;
        background-color: var(--dm-bg-card-secondary) !important;
        border-top: 1px solid var(--dm-border-primary) !important;
    }

    /* ========================================== */
    /* MESSAGE BUBBLE STYLING                     */
    /* ========================================== */

    .dm-message-own {
        background: var(--dm-message-own-bg) !important;
        color: var(--dm-message-own-text) !important;
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        max-width: 80%;
        word-wrap: break-word;
    }

    .dm-message-other {
        background-color: var(--dm-message-other-bg) !important;
        color: var(--dm-message-other-text) !important;
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        max-width: 80%;
        word-wrap: break-word;
    }

    /* ========================================== */
    /* BADGE VARIANTS                             */
    /* ========================================== */

    .dm-badge-primary {
        background-color: var(--dm-color-primary) !important;
        color: #ffffff !important;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
        display: inline-block;
    }

    .dm-badge-secondary {
        background-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
        display: inline-block;
    }

    .dm-badge-success {
        background-color: rgba(76, 175, 80, 0.2) !important;
        color: #81c784 !important;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
        display: inline-block;
    }

    .dm-badge-danger {
        background-color: rgba(211, 47, 47, 0.2) !important;
        color: var(--dm-status-error) !important;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 500;
        display: inline-block;
    }

    /* ========================================== */
    /* DIVIDER & SEPARATOR UTILITIES              */
    /* ========================================== */

    .dm-divider {
        border-color: var(--dm-border-primary) !important;
        margin: 1rem 0;
    }

    .dm-divider-vertical {
        border-left: 1px solid var(--dm-border-primary) !important;
        height: 100%;
    }

    /* ========================================== */
    /* GLASS MORPHISM EFFECTS                     */
    /* ========================================== */

    .dm-glass-light {
        background: var(--dm-glass-light);
        backdrop-filter: blur(10px);
    }

    .dm-glass-medium {
        background: var(--dm-glass-medium);
        backdrop-filter: blur(10px);
    }

    .dm-glass-dark {
        background: var(--dm-glass-dark);
        backdrop-filter: blur(10px);
    }

    /* ========================================== */
    /* OVERLAY UTILITIES                          */
    /* ========================================== */

    .dm-overlay {
        background-color: var(--dm-overlay-dark) !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
    }

    /* ========================================== */
    /* OPACITY UTILITIES                          */
    /* ========================================== */

    .dm-opacity-5 {
        opacity: 0.05;
    }

    .dm-opacity-10 {
        opacity: 0.1;
    }

    .dm-opacity-20 {
        opacity: 0.2;
    }

    .dm-opacity-30 {
        opacity: 0.3;
    }

    .dm-opacity-50 {
        opacity: 0.5;
    }

    .dm-opacity-75 {
        opacity: 0.75;
    }

    /* ========================================== */
    /* ANIMATION UTILITIES                        */
    /* ========================================== */

    @keyframes dm-fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes dm-slide-in {
        from {
            transform: translateY(10px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .dm-fade-in {
        animation: dm-fade-in 0.2s ease-in;
    }

    .dm-slide-in {
        animation: dm-slide-in 0.2s ease-out;
    }

    /* ========================================== */
    /* RESPONSIVE UTILITIES                       */
    /* ========================================== */

    .dm-hidden-mobile {
        display: block;
    }

    .dm-hidden-desktop {
        display: none;
    }

    @media (max-width: 768px) {
        .dm-hidden-mobile {
            display: none;
        }

        .dm-hidden-desktop {
            display: block;
        }
    }

    /* ========================================== */
    /* HELP CENTER PATTERNS                      */
    /* ========================================== */

    /* Hero Section */
    .dm-hero {
        background: linear-gradient(135deg, var(--dm-bg-card) 0%, var(--dm-bg-card-secondary) 100%);
        color: var(--dm-text-primary) !important;
    }

    .dm-hero__title {
        color: var(--dm-accent-gold) !important;
    }

    .dm-hero__subtitle {
        color: var(--dm-text-secondary) !important;
        opacity: 0.9;
    }

    /* Article Back Link */
    .dm-article-back-link a {
        color: var(--dm-color-primary) !important;
    }

    .dm-article-back-link a:hover {
        color: var(--dm-accent-gold) !important;
    }

    /* Article Section */
    .dm-article-section {
        border-bottom-color: var(--dm-border-primary) !important;
        background-color: rgba(42, 38, 34, 0.5) !important;
    }

    /* CTA Section */
    .dm-cta-section {
        background: linear-gradient(135deg, var(--dm-bg-card) 0%, rgba(42, 38, 34, 0.8) 100%) !important;
        border-top-color: var(--dm-accent-gold) !important;
    }

    .dm-cta-section h2 {
        border-bottom: none !important;
        color: var(--dm-color-primary) !important;
    }

    .dm-cta-section p {
        color: var(--dm-text-primary) !important;
    }

    /* ========================================== */
    /* FORM COMPONENT PATTERNS                    */
    /* ========================================== */

    /* Choice Cards (Onboarding) */
    .dm-choice-card {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .dm-choice-card:hover {
        border-color: var(--dm-color-primary) !important;
        background: var(--dm-primary-opacity-15) !important;
    }

    .dm-choice-title {
        color: #ffffff !important;
    }

    .dm-choice-desc {
        color: var(--dm-text-secondary) !important;
    }

    /* Path/Option Cards */
    .dm-path-btn,
    .dm-option-card {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .dm-path-btn:hover,
    .dm-option-card:hover {
        background: var(--dm-color-primary) !important;
        color: #ffffff !important;
        border-color: var(--dm-color-primary) !important;
    }

    .dm-path-title,
    .dm-option-title {
        color: #ffffff !important;
    }

    .dm-path-desc,
    .dm-option-desc {
        color: var(--dm-text-secondary) !important;
    }

    /* Category/Subcategory Cards */
    .dm-category-card,
    .dm-subcategory-card {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .dm-category-card:hover,
    .dm-subcategory-card:hover {
        background: var(--dm-border-primary) !important;
        border-color: var(--dm-color-primary) !important;
    }

    .dm-category-card.selected,
    .dm-subcategory-card.selected {
        background: var(--dm-primary-opacity-20) !important;
        border-color: var(--dm-color-primary) !important;
        box-shadow: 0 0 0 3px var(--dm-primary-opacity-20) !important;
    }

    .dm-category-card h4,
    .dm-category-card .dm-category-title {
        color: #ffffff !important;
    }

    .dm-category-card p,
    .dm-category-card .dm-category-desc {
        color: var(--dm-text-secondary) !important;
    }

    /* Form Fieldset */
    .dm-form-fieldset {
        border-color: var(--dm-border-primary) !important;
        background: var(--dm-bg-card-secondary) !important;
    }

    .dm-form-fieldset legend {
        color: var(--dm-text-primary) !important;
    }

    /* Password Toggle */
    .dm-password-toggle {
        color: var(--dm-accent-gold) !important;
    }

    .dm-password-toggle:hover {
        color: var(--dm-accent-gold-hover) !important;
    }

    /* ========================================== */
    /* COVERAGE & CONFIG PATTERNS                 */
    /* ========================================== */

    .dm-coverage-option-box {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .dm-coverage-option-title,
    .dm-coverage-config-title {
        color: #ffffff !important;
    }

    .dm-coverage-option-description {
        color: var(--dm-text-primary) !important;
    }

    .dm-coverage-controls {
        background: var(--dm-bg-page) !important;
    }

    .dm-coverage-radius-display {
        color: var(--dm-accent-gold) !important;
    }

    .dm-radius-slider {
        accent-color: var(--dm-color-primary) !important;
    }

    /* ========================================== */
    /* NAVIGATION PATTERNS                        */
    /* ========================================== */

    .dm-nav-section-item {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .dm-nav-section-item:hover {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-color-primary) !important;
        color: #ffffff !important;
    }

    .dm-nav-section-item.active {
        background: var(--dm-bg-card-secondary) !important;
        color: var(--dm-color-primary) !important;
        border-color: var(--dm-color-primary) !important;
        box-shadow: 0 2px 8px var(--dm-primary-opacity-20) !important;
    }

    /* ========================================== */
    /* CHECKBOX & RADIO PATTERNS                  */
    /* ========================================== */

    .dm-checkbox-label input[type="checkbox"],
    .dm-radio-label input[type="radio"] {
        accent-color: var(--dm-color-primary) !important;
    }

    .dm-checkbox-label:hover,
    .dm-radio-label:hover {
        background-color: var(--dm-border-primary) !important;
    }

    .dm-checkbox-label input[type="checkbox"]:checked + .dm-checkbox-text,
    .dm-radio-label input[type="radio"]:checked + .dm-radio-text {
        color: var(--dm-accent-gold) !important;
        font-weight: 600 !important;
    }

    .dm-checkbox-text,
    .dm-radio-text {
        color: var(--dm-text-primary) !important;
    }

    .dm-checkbox-sublabel,
    .dm-radio-sublabel {
        color: var(--dm-text-secondary) !important;
    }
}