/*
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: styles/dark-mode/dark-mode-base.css                         ║
║  Purpose: Dark mode foundation, CSS variables, universal styling   ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                      ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. CSS Variables (Color System)
  2. Universal Element Overrides
  3. Text Styling
  4. Interactive Elements
  5. Responsive Base Styles
*/

@media (prefers-color-scheme: dark) {
    /* ========================================== */
    /* 1. CSS VARIABLES (COLOR SYSTEM) */
    /* ========================================== */

    :root {
        /* Brand Colors */
        --dm-color-primary: #77883e;
        --dm-color-primary-dark: #5f7030;
        --dm-color-primary-light: #99aa52;
        
        /* Background Colors */
        --dm-bg-page: #1a1714;
        --dm-bg-card: #2a2622;
        --dm-bg-card-secondary: #3d3934;
        --dm-bg-elevated: #2a2622;
        
        /* Text Colors */
        --dm-text-primary: #e8e4d8;
        --dm-text-secondary: #c9c4b8;
        --dm-text-muted: #d0ccc5;
        --dm-text-on-light: #2a2622;
        --dm-text-light-grey: #8a8680;
        
        /* Accent Colors */
        --dm-accent-gold: #d9cc94;
        --dm-accent-gold-hover: #e8c547;
        --dm-accent-gold-visited: #b8a875;
        
        /* Status Colors */
        --dm-status-success: #10b981;
        --dm-status-warning: #fbbf24;
        --dm-status-danger: #f87171;
        --dm-status-error: #ef5350;
        --dm-status-info: #3b82f6;
        
        /* Border & Divider Colors */
        --dm-border-primary: #4a4540;
        --dm-border-secondary: #3d3934;
        --dm-border-light: #6d6961;
        --dm-border-brand: #77883e;
        
        /* ========================================== */
        /* OPACITY VARIANTS                          */
        /* ========================================== */
        
        /* Primary Color Opacity Variants */
        --dm-primary-opacity-01: rgba(119, 136, 62, 0.01);
        --dm-primary-opacity-02: rgba(119, 136, 62, 0.02);
        --dm-primary-opacity-03: rgba(119, 136, 62, 0.03);
        --dm-primary-opacity-05: rgba(119, 136, 62, 0.05);
        --dm-primary-opacity-08: rgba(119, 136, 62, 0.08);
        --dm-primary-opacity-10: rgba(119, 136, 62, 0.1);
        --dm-primary-opacity-12: rgba(119, 136, 62, 0.12);
        --dm-primary-opacity-15: rgba(119, 136, 62, 0.15);
        --dm-primary-opacity-20: rgba(119, 136, 62, 0.2);
        --dm-primary-opacity-30: rgba(119, 136, 62, 0.3);
        --dm-primary-opacity-40: rgba(119, 136, 62, 0.4);
        
        /* ========================================== */
        /* SHADOW SYSTEM                             */
        /* ========================================== */
        
        --dm-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
        --dm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --dm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --dm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
        --dm-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
        --dm-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
        --dm-shadow-elevated: 0 24px 48px rgba(0, 0, 0, 0.5);
        --dm-shadow-brand: 0 8px 24px rgba(119, 136, 62, 0.12);
        
        /* ========================================== */
        /* GLASS & OVERLAY EFFECTS                   */
        /* ========================================== */
        
        --dm-glass-light: rgba(61, 57, 52, 0.80);
        --dm-glass-medium: rgba(42, 38, 34, 0.90);
        --dm-glass-dark: rgba(26, 23, 20, 0.95);
        --dm-overlay-dark: rgba(0, 0, 0, 0.7);
        
        /* ========================================== */
        /* MESSAGING SYSTEM                          */
        /* ========================================== */
        
        --dm-message-own-bg: linear-gradient(135deg, #77883e 0%, #5f7030 100%);
        --dm-message-own-text: #ffffff;
        --dm-message-other-bg: #e8e4d8;
        --dm-message-other-text: #2a2622;
        
        /* ========================================== */
        /* INTERACTIVE STATES                        */
        /* ========================================== */
        
        --dm-focus-ring: 0 0 0 3px rgba(119, 136, 62, 0.2);
        --dm-focus-ring-strong: 0 0 0 3px rgba(119, 136, 62, 0.3);
        
        /* ========================================== */
        /* LEGACY ALIASES (for backward compatibility) */
        /* ========================================== */
        
        --rooted-primary: #77883e;
        --rooted-primary-dark: #5f7030;
        --rooted-accent: #d9cc94;
        --rooted-neutral: #e8e4d8;
        --rooted-sage: #1a1714;
        --rooted-dark: #e8e4d8;
        --rooted-light: #1a1714;
        --rooted-cream: #2a2622;
        --glass-white: rgba(26, 23, 20, 0.85);
        --rooted-success: #10b981;
        --rooted-warning: #fbbf24;
        --rooted-danger: #f87171;
        --card-bg-primary: #2a2622;
        --card-bg-secondary: #3d3934;
        --card-bg-gradient-light: rgba(119, 136, 62, 0.08);
        --card-bg-gradient-accent: rgba(58, 58, 50, 0.6);
        --card-bg-gradient-accent-soft: rgba(58, 58, 50, 0.5);
        --card-border-primary: #996633;
        --card-border-accent: #77883e;
        --card-border-light: #3d3934;
        --card-border: #4a4540;
        --card-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
        --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
        --card-text-primary: #e8e4d8;
        --card-text-secondary: #b0aca4;
        --card-text-secondary: #b8b3b0;
        --card-accent-color: #77883e;
        --card-icon-color: #77883e;
        --primary-opacity-01: rgba(119, 136, 62, 0.01);
        --primary-opacity-02: rgba(119, 136, 62, 0.02);
        --primary-opacity-03: rgba(119, 136, 62, 0.03);
        --primary-opacity-05: rgba(119, 136, 62, 0.05);
        --primary-opacity-08: rgba(119, 136, 62, 0.08);
        --primary-opacity-10: rgba(119, 136, 62, 0.1);
        --primary-opacity-12: rgba(119, 136, 62, 0.12);
        --primary-opacity-15: rgba(119, 136, 62, 0.15);
        --primary-opacity-20: rgba(119, 136, 62, 0.2);
        --primary-opacity-30: rgba(119, 136, 62, 0.3);
        --primary-opacity-40: rgba(119, 136, 62, 0.4);
        --color-text: #e8e4d8;
        --color-text-light: #c9c4b8;
        --color-text-muted: #8f8b87;
        --text-light: #1a1714;
        --glass-light: rgba(61, 57, 52, 0.80);
        --glass-dark: rgba(42, 38, 34, 0.95);
        --border-light: #4a4540;
        --border-dark: #6d6961;
        --text-light-grey: #7a7670;
        --text-muted-light: #b0aca4;
        --color-hero-green: #1b3a1b;
        --color-hero-cream: #2a2622;
        --color-hero-peach: #3d2820;
        --color-button: #77883e;
        --shadow-minimal: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-light: 0 8px 24px rgba(0, 0, 0, 0.4);
        --shadow-medium: 0 8px 24px rgba(119, 136, 62, 0.12);
        --shadow-elevated: 0 24px 48px rgba(0, 0, 0, 0.5);
        --message-own-bg: linear-gradient(135deg, #77883e 0%, #5f7030 100%);
        --message-other-bg: #e8e4d8;
        --message-own-text: #ffffff;
        --message-other-text: #2a2622;
        --text-on-light: #2a2622;
        --rooted-primary-10: rgba(119, 136, 62, 0.1);
        --rooted-primary-15: rgba(119, 136, 62, 0.15);
        --rooted-primary-20: rgba(119, 136, 62, 0.2);
        --rooted-primary-25: rgba(119, 136, 62, 0.25);
        --rooted-primary-30: rgba(119, 136, 62, 0.3);
        --rooted-primary-40: rgba(119, 136, 62, 0.4);
        --rooted-border: #4a4540;
        --rooted-border-light: #3d3934;
        --rooted-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --rooted-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --rooted-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
        --form-bg: #3d3934;
        --form-border: #4a4540;
        --form-text: #e8e4d8;
        --form-placeholder: #8a8580;
        --status-success: #10b981;
        --status-error: #f87171;
        --status-warning: #fbbf24;
        --status-info: #3b82f6;
        --header-bg: #2a2622;
        --header-text: #ffffff;
        --header-border: #4a4540;
    }

    /* ========================================== */
    /* UNIVERSAL BASE ELEMENTS                   */
    /* ========================================== */

    html,
    body {
        background: var(--dm-bg-page) !important;
        color: var(--dm-text-primary) !important;
    }

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

    main {
        background-color: transparent;
    }

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #ffffff !important;
    }

    p,
    span,
    li,
    td {
        color: var(--dm-text-primary) !important;
    }

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

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

    a:visited {
        color: var(--dm-accent-gold-visited) !important;
    }

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

    /* ========================================== */
    /* FORM ELEMENTS - TEXT INPUTS               */
    /* ========================================== */

    input,
    textarea,
    select {
        background-color: transparent !important;
        color: var(--dm-text-primary) !important;
        border-color: transparent !important;
    }

    input::placeholder,
    textarea::placeholder,
    select::placeholder {
        color: var(--dm-form-placeholder) !important;
    }

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

    /* ========================================== */
    /* BUTTONS - BASE                            */
    /* ========================================== */

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

    button:hover,
    .btn:hover {
        background-color: var(--dm-color-primary-dark) !important;
    }

    button:disabled,
    .btn:disabled {
        background-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-form-placeholder) !important;
        border-color: var(--dm-border-primary) !important;
    }

    /* Transparent buttons */
    .rv-notifications-btn {
        background-color: transparent !important;
        border-color: transparent !important;
    }

    .rv-notifications-btn:hover {
        background-color: transparent !important;
    }

    /* Footer link buttons */
    .rv-footer-link-btn,
    .rv-footer-nav button,
    .rv-footer-nav .rv-footer-link-btn {
        background-color: transparent !important;
        background: transparent !important;
        border-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        color: #fbf7ec !important;
    }

    .rv-footer-link-btn:hover,
    .rv-footer-link-btn:focus,
    .rv-footer-link-btn:active,
    .rv-footer-nav button:hover,
    .rv-footer-nav .rv-footer-link-btn:hover {
        background-color: transparent !important;
        background: transparent !important;
        border: none !important;
        border-width: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        color: #ffffff !important;
    }

    /* ========================================== */
    /* BUTTONS - VARIANTS                        */
    /* ========================================== */

    .btn-primary {
        background-color: var(--dm-color-primary) !important;
        color: #ffffff !important;
    }

    .btn-primary:hover {
        background-color: var(--dm-color-primary-dark) !important;
    }

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

    .btn-secondary:hover {
        background-color: var(--dm-primary-opacity-15) !important;
        border-color: var(--dm-color-primary-dark) !important;
        color: var(--dm-color-primary-dark) !important;
    }

    .btn-danger {
        background-color: #d32f2f !important;
        color: #ffffff !important;
    }

    .btn-danger:hover {
        background-color: #b71c1c !important;
    }

    .btn-danger:disabled {
        background-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-form-placeholder) !important;
    }

    /* ========================================== */
    /* CARDS & CONTAINERS                        */
    /* ========================================== */

    .card,
    .card-element {
        background-color: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        box-shadow: var(--dm-shadow-sm) !important;
    }

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

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

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

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

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

    table {
        background-color: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
    }

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

    thead th {
        color: #ffffff !important;
        border-bottom-color: var(--dm-border-primary) !important;
    }

    tbody tr {
        border-bottom-color: var(--dm-border-primary) !important;
    }

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

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

    code,
    pre {
        background-color: var(--dm-bg-card-secondary) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
    }

    /* ========================================== */
    /* SCROLLBAR                                  */
    /* ========================================== */

    ::-webkit-scrollbar {
        background: var(--dm-bg-card) !important;
    }

    ::-webkit-scrollbar-track {
        background: var(--dm-bg-card) !important;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--dm-border-primary) !important;
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--dm-color-primary) !important;
    }

    /* ========================================== */
    /* SELECTION                                  */
    /* ========================================== */

    ::selection {
        background-color: var(--dm-color-primary) !important;
        color: #ffffff !important;
    }

    /* ========================================== */
    /* PLACEHOLDERS                               */
    /* ========================================== */

    ::placeholder {
        color: var(--dm-form-placeholder) !important;
    }

    /* ========================================== */
    /* DIVIDERS & SEPARATORS                      */
    /* ========================================== */

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

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

    ul,
    ol {
        color: var(--dm-text-primary) !important;
    }

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

    /* ========================================== */
    /* BLOCKQUOTES                                */
    /* ========================================== */

    blockquote {
        background-color: var(--dm-bg-card-secondary) !important;
        border-left-color: var(--dm-color-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    /* ========================================== */
    /* LABELS & FORM TEXT                         */
    /* ========================================== */

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

    label.required::after {
        color: #ff6b6b !important;
    }

    .field-hint,
    .help-text,
    .form-text {
        color: var(--dm-text-secondary) !important;
    }

    /* ========================================== */
    /* BADGES                                     */
    /* ========================================== */

    .badge {
        background-color: var(--dm-color-primary) !important;
        color: #ffffff !important;
    }

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

    /* ========================================== */
    /* MODALS & OVERLAYS                          */
    /* ========================================== */

    .modal-overlay,
    .modal-backdrop {
        background-color: var(--dm-overlay-dark) !important;
    }

    .modal-content,
    .modal {
        background-color: var(--dm-bg-card) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-primary) !important;
    }

    /* ========================================== */
    /* TABS                                       */
    /* ========================================== */

    .tabs,
    [role="tablist"] {
        background-color: var(--dm-bg-page) !important;
        border-color: var(--dm-border-primary) !important;
    }

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

    /* ========================================== */
    /* DROPDOWNS                                  */
    /* ========================================== */

    .dropdown-menu,
    [role="menu"] {
        background-color: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
    }

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

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

    /* ========================================== */
    /* ALERTS                                     */
    /* ========================================== */

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

    .alert-success {
        background-color: rgba(76, 175, 80, 0.2) !important;
        border-color: #4caf50 !important;
        color: #81c784 !important;
    }

    .alert-error,
    .alert-danger {
        background-color: rgba(211, 47, 47, 0.2) !important;
        border-color: #d32f2f !important;
        color: var(--dm-status-error) !important;
    }

    .alert-warning {
        background-color: rgba(255, 152, 0, 0.2) !important;
        border-color: #ff9800 !important;
        color: #ffb74d !important;
    }

    .alert-info {
        background-color: rgba(33, 150, 243, 0.2) !important;
        border-color: #2196f3 !important;
        color: #64b5f6 !important;
    }

    /* ========================================== */
    /* FOCUS & INTERACTION STATES                 */
    /* ========================================== */

    button:focus,
    a:focus,
    input:focus {
        outline: none;
    }

    button:focus-visible,
    .btn:focus-visible {
        box-shadow: var(--dm-focus-ring) !important;
        outline: 2px solid var(--dm-color-primary) !important;
        outline-offset: 2px !important;
    }
}

/* ============================================================================
   WCAG 2.4.7 FOCUS VISIBLE - OVERRIDE ALL OUTLINE: NONE DECLARATIONS
   ============================================================================
   
   This section overrides ALL outline: none / outline: 0 declarations
   throughout the codebase. We use !important to ensure focus indicators
   are always visible, meeting WCAG 2.1 Level AA requirements.
   
*/

/* Light mode focus indicators - dark text on light backgrounds */
:not(.dark-mode) button:focus-visible,
:not(.dark-mode) a:focus-visible,
:not(.dark-mode) input:focus-visible,
:not(.dark-mode) textarea:focus-visible,
:not(.dark-mode) select:focus-visible,
:not(.dark-mode) [role="button"]:focus-visible,
:not(.dark-mode) [role="menuitem"]:focus-visible,
:not(.dark-mode) [role="tab"]:focus-visible {
    outline: 2px solid #2c3e50 !important;
    outline-offset: 2px !important;
}

/* Dark mode focus indicators - gold accent */
.dark-mode button:focus-visible,
.dark-mode a:focus-visible,
.dark-mode input:focus-visible,
.dark-mode textarea:focus-visible,
.dark-mode select:focus-visible {
    outline: 2px solid var(--dm-accent-gold, #c8a882) !important;
    outline-offset: 2px !important;
}

/* Tab elements - outline inside */
[role="tab"]:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: -2px !important;
}

/* Dropdown/Menu items - no offset */
[role="menu"] [role="menuitem"]:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 0px !important;
}

/* Icon buttons and compact buttons - smaller offset */
button.icon-btn:focus-visible,
.icon-button:focus-visible,
[role="button"].compact:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 1px !important;
}