/* ============================================
   Theme System - CSS Custom Properties
   Light (default) and Dark mode variables
   ============================================ */

:root {
    /* Backgrounds */
    --bg-body: #ffffff;
    --bg-surface: #f8f9fa;
    --bg-surface-alt: #e9ecef;
    --bg-elevated: #ffffff;

    /* Text */
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #6c757d;
    --text-on-primary: #ffffff;
    --text-on-danger: #ffffff;

    /* Borders */
    --border-default: #dee2e6;
    --border-light: #e0e0e0;
    --border-strong: #cccccc;

    /* Brand / accent */
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;
    --color-primary-soft: #e7f1ff;
    --color-success: #28a745;
    --color-success-hover: #1e7e34;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-warning: #ffc107;
    --color-secondary: #6c757d;
    --color-secondary-hover: #545b62;
    --color-orange: orange;

    /* Alerts */
    --alert-success-bg: #d4edda;
    --alert-success-text: #155724;
    --alert-success-border: #c3e6cb;
    --alert-danger-bg: #f8d7da;
    --alert-danger-text: #721c24;
    --alert-danger-border: #f5c6cb;
    --alert-info-bg: #d1ecf1;
    --alert-info-text: #0c5460;
    --alert-info-border: #bee5eb;
    --alert-warning-bg: #fff3cd;
    --alert-warning-text: #856404;
    --alert-warning-border: #ffeeba;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #dddddd;
    --input-focus-border: #007bff;
    --input-focus-ring: rgba(0, 123, 255, 0.25);

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Layout */
    --header-bg: #ffffff;
    --footer-bg: #ffffff;
    --header-border: #cccccc;
    --logo-color: #000000;
    --footer-text: dimgrey;

    /* Switcher */
    --switcher-bg: #f0f0f0;
    --switcher-inactive: #666666;
    --switcher-inactive-hover: #333333;

    /* Tables */
    --table-header-bg: #e9ecef;
    --table-row-hover: #f8f9fa;
    --table-border: #dee2e6;

    /* Checkers board */
    --board-light-square: #f0d9b5;
    --board-dark-square: #b58863;
    --board-border: #333333;

    /* Misc */
    --link-color: #007bff;
    --code-bg: #f8f9fa;
    --highlight-purple-bg: #f3e5f5;
    --highlight-purple-border: #9c27b0;
    --highlight-purple-text: #4a148c;
    --highlight-blue-bg: #e3f2fd;
    --highlight-blue-border: #2196f3;
    --highlight-blue-text: #0d47a1;
    --highlight-blue-code-bg: #bbdefb;
    --your-turn-bg: linear-gradient(to right, #fff3cd, transparent);
    --your-turn-border: #ffc107;
    --invite-bg: linear-gradient(to right, #e7f3ff, transparent);
    --invite-status: #0066cc;
}

/* ============================================
   Dark Theme – deep dark-blue / material
   ============================================ */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-body: #0d1117;
    --bg-surface: #161b22;
    --bg-surface-alt: #1c2333;
    --bg-elevated: #1c2333;

    /* Text */
    --text-primary: #e6edf3;
    --text-secondary: #b1bac4;
    --text-muted: #8b949e;
    --text-on-primary: #ffffff;
    --text-on-danger: #ffffff;

    /* Borders */
    --border-default: #30363d;
    --border-light: #21262d;
    --border-strong: #484f58;

    /* Brand / accent */
    --color-primary: #58a6ff;
    --color-primary-hover: #79b8ff;
    --color-primary-soft: #1c3a5e;
    --color-success: #3fb950;
    --color-success-hover: #56d364;
    --color-danger: #f85149;
    --color-danger-hover: #ff6b63;
    --color-warning: #d29922;
    --color-secondary: #484f58;
    --color-secondary-hover: #6e7681;
    --color-orange: #e87b35;

    /* Alerts */
    --alert-success-bg: #0d2818;
    --alert-success-text: #3fb950;
    --alert-success-border: #1b4332;
    --alert-danger-bg: #2d0d0d;
    --alert-danger-text: #f85149;
    --alert-danger-border: #4c1d1d;
    --alert-info-bg: #0d1d2d;
    --alert-info-text: #58a6ff;
    --alert-info-border: #1c3a5e;
    --alert-warning-bg: #2d2200;
    --alert-warning-text: #d29922;
    --alert-warning-border: #4d3800;

    /* Inputs */
    --input-bg: #0d1117;
    --input-border: #30363d;
    --input-focus-border: #58a6ff;
    --input-focus-ring: rgba(88, 166, 255, 0.3);

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);

    /* Layout */
    --header-bg: #161b22;
    --footer-bg: #161b22;
    --header-border: #30363d;
    --logo-color: #e6edf3;
    --footer-text: #8b949e;

    /* Switcher */
    --switcher-bg: #21262d;
    --switcher-inactive: #8b949e;
    --switcher-inactive-hover: #e6edf3;

    /* Tables */
    --table-header-bg: #1c2333;
    --table-row-hover: #1c2333;
    --table-border: #30363d;

    /* Checkers board */
    --board-light-square: #4a5568;
    --board-dark-square: #2d3748;
    --board-border: #58a6ff;

    /* Misc */
    --link-color: #58a6ff;
    --code-bg: #161b22;
    --highlight-purple-bg: #2d1b3d;
    --highlight-purple-border: #9c27b0;
    --highlight-purple-text: #ce93d8;
    --highlight-blue-bg: #0d1d2d;
    --highlight-blue-border: #58a6ff;
    --highlight-blue-text: #90caf9;
    --highlight-blue-code-bg: #1c3a5e;
    --your-turn-bg: linear-gradient(to right, #2d2200, transparent);
    --your-turn-border: #d29922;
    --invite-bg: linear-gradient(to right, #0d1d2d, transparent);
    --invite-status: #58a6ff;
}

/* ============================================
   Dark-mode toggle switch
   (pill with sliding highlight, matching language switcher)
   ============================================ */
.theme-switcher {
    display: flex;
    align-items: center;
    background: var(--switcher-bg);
    border-radius: 20px;
    padding: 3px;
    position: relative;
    cursor: pointer;
}

.theme-switcher::before {
    content: '';
    position: absolute;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: var(--color-primary);
    border-radius: 18px;
    transition: transform 0.3s ease;
    top: 3px;
    left: 3px;
}

[data-theme="dark"] .theme-switcher::before {
    transform: translateX(100%);
}

.theme-btn {
    padding: 4px 6px;
    border-radius: 18px;
    font-size: 1.1rem;
    line-height: 1;
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease;
    user-select: none;
    cursor: pointer;
}

/* Light mode (default): sun is active, moon is dimmed */
.theme-btn-light {
    opacity: 1;
}

.theme-btn-dark {
    opacity: 0.45;
}

/* Dark mode: moon is active, sun is dimmed */
[data-theme="dark"] .theme-btn-light {
    opacity: 0.45;
}

[data-theme="dark"] .theme-btn-dark {
    opacity: 1;
}