/* =============================================
   nd shop — Dark Mode Design Tokens
   =============================================
   This file defines CSS custom properties (variables)
   for BOTH light and dark themes. The system uses 
   three modes: System (default), Light, and Dark.

   The "system" mode respects the OS/browser preference.
   ============================================= */

/* ─── Light Theme Tokens (Default) ─── */
:root {
    /* ── Backgrounds ── */
    --bg-primary: #f5f5f5;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f9f9f9;
    --bg-surface-hover: #ebebeb;
    --bg-elevated: #ffffff;
    --bg-input: #f8fafc;
    --bg-input-focus: #ffffff;
    --bg-modal-overlay: rgba(0, 0, 0, 0.5);

    /* ── Shadows ── */
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-topbar: 0 2px 12px rgba(0, 0, 0, 0.1);

    /* ── Text Colors ── */
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #666666;
    --text-faint: #888888;
    --text-placeholder: #aaaaaa;
    --text-heading: #1a202c;
    --text-dark: #2d3748;

    /* ── Border Colors ── */
    --border-primary: #e2e8f0;
    --border-light: #eeeeee;
    --border-lighter: #f5f5f5;
    --border-subtle: #edf2f7;
    --border-input: #e2e8f0;

    /* ── Brand Colors (stay consistent) ── */
    --brand-orange: #8b5cf6;
    --brand-orange-hover: #2c3e50;
    --brand-orange-shadow: rgba(27, 38, 59, 0.25);
    --brand-orange-light: #edf1f7;
    --brand-orange-bg: #f0f4f8;
    --brand-green: #8b5cf6;
    --brand-green-hover: #2c3e50;
    --brand-green-shadow: rgba(27, 38, 59, 0.15);
    --brand-green-bg: #edf1f7;
    --brand-red: #dc3545;
    --brand-red-bg: #fee2e2;
    --brand-red-light: #ffcccc;
    --brand-red-hover-bg: #fff5f5;

    /* ── Shadows ── */
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.1);
    --shadow-topbar: 0 2px 12px rgba(0, 0, 0, 0.1);

    /* ── Component-Specific ── */
    --scrollbar-thumb: #cbd5e0;
    --scrollbar-hover: #8b5cf6;
    --close-btn-bg: #f7fafc;
    --close-btn-color: #a0aec0;
    --close-btn-hover-bg: #edf2f7;
    --close-btn-hover-color: #1a202c;
    --toggle-off: #cbd5e0;
    --modal-content-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --dropdown-border: #e8e8e8;
    --dropdown-hover: #f9f9f9;

    /* ── Auth-Specific ── */
    --auth-body-bg: #f8fafc;
    --auth-card-bg: rgba(255, 255, 255, 0.95);
    --auth-subtitle-color: #64748b;
    --auth-label-color: #4a5568;
    --auth-input-bg: #ffffff;
    --auth-input-color: #2d3748;
    --auth-input-placeholder: #cbd5e0;
    --auth-icon-color: #a0aec0;
    --auth-footer-text: #64748b;
    --auth-footer-border: #e2e8f0;
    --auth-modal-bg: #ffffff;

    /* ── Topbar ── */
    --topbar-bg: #ffffff;

    /* ── Orange Bar (Desktop) ── */
    --bar-item-bg: #ffffff;
    --bar-item-color: #8b5cf6;
    --bar-item-border: #8b5cf6;
    --bar-item-hover-bg: #edf1f7;
    --bar-item-active-bg: #8b5cf6;
    --bar-item-active-color: #ffffff;

    /* ── Orange Bar (Mobile) ── */
    --mobile-bar-bg: #ffffff;
    --mobile-bar-border: #8b5cf6;
    --mobile-bar-text: #8b5cf6;
    --mobile-bar-active-text: #ffffff;
    --mobile-bar-indicator: #8b5cf6;

    /* ── Details list backgrounds ── */
    --details-list-bg: #f9f9f9;
    --highlight-bg: #edf1f7;

    /* ── Misc ── */
    --tab-bar-bg: #f1f5f9;
    --tab-inactive-color: #64748b;
    --otp-bg: #f8fafc;
    --otp-border: #e2e8f0;
    --toast-bg: #1a202c;
    --action-btn-bg: #f0f0f0;
    --action-btn-color: #444444;
    --action-btn-hover: #e4e4e4;
    --progress-track-bg: #e2e8f0;
    --success-container-bg: #f0f4f8;
    --success-border: #cce4ff;
}

/* ─── Dark Theme Tokens ─── */
[data-theme="dark"] {
    /* ── Backgrounds ── */
    --bg-primary: #0f0f0f;
    --bg-surface: #1a1a1a;
    --bg-surface-alt: #212121;
    --bg-surface-hover: #2d2d2d;
    --bg-elevated: #1e1e1e;
    --bg-input: #1e1e1e;
    --bg-input-focus: #252525;
    --bg-modal-overlay: rgba(0, 0, 0, 0.7);

    /* ── Shadows ── */
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 5px 25px rgba(0, 0, 0, 0.5);
    --shadow-topbar: 0 2px 12px rgba(0, 0, 0, 0.4);

    /* ── Text Colors ── */
    --text-primary: #e4e4e4;
    --text-secondary: #c0c0c0;
    --text-muted: #9a9a9a;
    --text-faint: #777777;
    --text-placeholder: #666666;
    --text-heading: #f0f0f0;
    --text-dark: #dcdcdc;

    /* ── Border Colors ── */
    --border-primary: #2d2d2d;
    --border-light: #2a2a2a;
    --border-lighter: #222222;
    --border-subtle: #252525;
    --border-input: #333333;

    /* ── Brand Colors (slightly boosted for dark) ── */
    --brand-orange: #31415A;
    --brand-orange-hover: #8b5cf6;
    --brand-orange-shadow: rgba(27, 38, 59, 0.3);
    --brand-orange-light: #1a2633;
    --brand-orange-bg: #1e1710;
    --brand-green: #8b5cf6;
    --brand-green-hover: #8b5cf6;
    --brand-green-shadow: rgba(27, 38, 59, 0.2);
    --brand-green-bg: #1a2633;
    --brand-red: #ff4d5e;
    --brand-red-bg: #2d1215;
    --brand-red-light: #3d1a1e;
    --brand-red-hover-bg: #2d1215;

    /* ── Shadows ── */
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-topbar: 0 2px 12px rgba(0, 0, 0, 0.4);

    /* ── Component-Specific ── */
    --scrollbar-thumb: #444444;
    --scrollbar-hover: #31415A;
    --close-btn-bg: #2a2a2a;
    --close-btn-color: #888888;
    --close-btn-hover-bg: #333333;
    --close-btn-hover-color: #e0e0e0;
    --toggle-off: #444444;
    --modal-content-bg: #1a1a1a;
    --dropdown-bg: #1e1e1e;
    --dropdown-border: #333333;
    --dropdown-hover: #252525;

    /* ── Auth-Specific ── */
    --auth-body-bg: #0f0f0f;
    --auth-card-bg: rgba(26, 26, 26, 0.95);
    --auth-subtitle-color: #888888;
    --auth-label-color: #aaaaaa;
    --auth-input-bg: #1e1e1e;
    --auth-input-color: #e4e4e4;
    --auth-input-placeholder: #555555;
    --auth-icon-color: #666666;
    --auth-footer-text: #888888;
    --auth-footer-border: #2d2d2d;
    --auth-modal-bg: #1a1a1a;

    /* ── Topbar ── */
    --topbar-bg: #161616;

    /* ── Orange Bar (Desktop) ── */
    --bar-item-bg: #1e1e1e;
    --bar-item-color: #31415A;
    --bar-item-border: #31415A;
    --bar-item-hover-bg: #1a2633;
    --bar-item-active-bg: #31415A;
    --bar-item-active-color: #ffffff;

    /* ── Orange Bar (Mobile) ── */
    --mobile-bar-bg: #1a1a1a;
    --mobile-bar-border: #31415A;
    --mobile-bar-text: #31415A;
    --mobile-bar-active-text: #ffffff;
    --mobile-bar-indicator: #31415A;

    /* ── Details list backgrounds ── */
    --details-list-bg: #212121;
    --highlight-bg: #1a2633;

    /* ── Misc ── */
    --tab-bar-bg: #252525;
    --tab-inactive-color: #888888;
    --otp-bg: #1e1e1e;
    --otp-border: #333333;
    --toast-bg: #2a2a2a;
    --action-btn-bg: #252525;
    --action-btn-color: #c0c0c0;
    --action-btn-hover: #2d2d2d;
    --progress-track-bg: #333333;
    --success-container-bg: #1a2633;
    --success-border: #2c3e50;
}