/* ============================================
   variables.css — CSS-змінні та теми
   Підключати ПЕРШИМ серед CSS файлів
   ============================================ */

/* ── Світла тема (дефолт) ── */
:root,
[data-theme="light"] {
    --primary-color:   #1F1F1F;
    --primary-dark:    #1F1F1F;
    --secondary-color: #c7617e;
    --success-color:   #10b92c;
    --warning-color:   #bd0c0c;

    --text-dark:   #1f2937;
    --text-light:  #1f2937;
    --text-muted:  #1f2937;

    --bg-light:    #fefcf8;
    --bg-white:    #ffffff;
    --border-color:#e5e7eb;

    --shadow:    0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);

    --header-from: #1F1F1F;
    --header-to:   #1F1F1F;

    --panel-bg:      rgba(255,255,255,0.98);
    --panel-text:    #1f2937;
    --panel-item-bg: rgba(242,247,246,0.9);
    --panel-shadow:  0 8px 30px rgba(0,0,0,0.12);

    --social-bg-from:      rgba(242,247,246,0.9);
    --social-bg-to:        rgba(255,255,255,0.95);
    --social-shadow:       0 2px 8px rgba(0,0,0,0.08);
    --social-hover-shadow: 0 8px 20px rgba(0,0,0,0.15);

    --theme-btn-bg:    rgba(255,255,255,0.15);
    --theme-btn-hover: rgba(255,255,255,0.28);

    --footer-from: #1F1F1F;
    --footer-to:   #1F1F1F;

    --modal-bg:          #ffffff;
    --modal-overlay:     rgba(0,0,0,0.55);
    --modal-border:      #e5e7eb;
    --modal-card-bg:     #f9fafb;
    --modal-card-hover:  #eef0f3;
    --modal-shadow:      0 20px 60px rgba(0,0,0,0.18);
}

/* ── Темна тема ── */
[data-theme="dark"] {
    --primary-color:   #d4af37;
    --primary-dark:    #b8962e;
    --secondary-color: #e07a96;
    --success-color:   #22c55e;
    --warning-color:   #ef4444;

    --text-dark:   #e8eaf0;
    --text-light:  #e8eaf0;
    --text-muted:  #e8eaf0;

    --bg-light:    #0f1117;
    --bg-white:    #181c28;
    --border-color:#272d3f;

    --shadow:    0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -1px rgba(0,0,0,0.30);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.55), 0 4px 6px -2px rgba(0,0,0,0.40);

    --header-from: #0c0e18;
    --header-to:   #11141e;

    --panel-bg:      rgba(18,22,35,0.98);
    --panel-text:    #e8eaf0;
    --panel-item-bg: rgba(28,33,52,0.95);
    --panel-shadow:  0 8px 30px rgba(0,0,0,0.50);

    --social-bg-from:      rgba(28,33,52,0.95);
    --social-bg-to:        rgba(18,22,35,0.95);
    --social-shadow:       0 2px 8px rgba(0,0,0,0.40);
    --social-hover-shadow: 0 8px 20px rgba(0,0,0,0.55);

    --theme-btn-bg:    rgba(255,255,255,0.10);
    --theme-btn-hover: rgba(255,255,255,0.20);

    --footer-from: #0c0e18;
    --footer-to:   #0c0e18;

    --modal-bg:         #181c28;
    --modal-overlay:    rgba(0,0,0,0.75);
    --modal-border:     #272d3f;
    --modal-card-bg:    #1f2436;
    --modal-card-hover: #252b40;
    --modal-shadow:     0 20px 60px rgba(0,0,0,0.60);
}