/**
 * Original Theme
 *
 * Clean white background theme - the original twisTABLE design
 * before photo backgrounds were added.
 *
 * Applied via: body[data-theme="original"]
 */

body[data-theme="original"] {
    /* ========== BACKGROUND ========== */
    --theme-bg-primary: var(--color-white);
    --theme-bg-secondary: var(--color-gray-50);
    --theme-bg-image: none;
    --theme-bg-size: auto;
    --theme-bg-position: center 90%;
    --theme-bg-repeat: no-repeat;
    --theme-bg-attachment: scroll;

    /* ========== TEXT COLORS ========== */
    --theme-text-primary: var(--color-gray-900);
    --theme-text-secondary: var(--color-gray-600);
    --theme-text-muted: var(--color-gray-400);
    --theme-text-shadow: none;

    /* ========== STRUCTURAL COLORS ========== */
    --theme-border-color: var(--color-gray-400);
    --theme-border-color-hover: var(--color-gray-600);
    --theme-border-light: var(--color-gray-400);
    --theme-text-disabled: var(--color-gray-400);
    --theme-hover-bg: rgba(0, 123, 255, var(--opacity-10));

    /* Shadows - Consolidated using opacity vars */
    --theme-shadow-xs: rgba(0, 0, 0, var(--opacity-5));
    --theme-shadow-sm: rgba(0, 0, 0, var(--opacity-10));
    --theme-shadow-md: rgba(0, 0, 0, var(--opacity-20));
    --theme-shadow-lg: rgba(0, 0, 0, var(--opacity-30));
    --theme-shadow-xl: rgba(0, 0, 0, var(--opacity-80));

    /* Legacy shadow names for compatibility */
    --theme-shadow-subtle: rgba(0, 0, 0, var(--opacity-5));
    --theme-shadow-lightest: rgba(0, 0, 0, var(--opacity-5));
    --theme-shadow-soft: rgba(0, 0, 0, var(--opacity-10));
    --theme-shadow-light: rgba(0, 0, 0, var(--opacity-20));
    --theme-shadow: rgba(0, 0, 0, var(--opacity-20));
    --theme-shadow-medium-light: rgba(0, 0, 0, var(--opacity-30));
    --theme-shadow-medium: rgba(0, 0, 0, var(--opacity-30));
    --theme-shadow-dark: rgba(0, 0, 0, var(--opacity-40));
    --theme-shadow-medium-dark: rgba(0, 0, 0, var(--opacity-50));
    --theme-shadow-darkest: rgba(0, 0, 0, var(--opacity-80));

    /* Overlays - Consolidated using opacity vars */
    --theme-overlay-xs: rgba(255, 255, 255, var(--opacity-10));
    --theme-overlay-sm: rgba(255, 255, 255, var(--opacity-20));
    --theme-overlay-md: rgba(255, 255, 255, var(--opacity-30));
    --theme-overlay-lg: rgba(255, 255, 255, var(--opacity-50));
    --theme-overlay-xl: rgba(255, 255, 255, var(--opacity-70));

    /* Legacy overlay names for compatibility */
    --theme-overlay-transparent: rgba(255, 255, 255, 0);
    --theme-overlay-lightest: rgba(255, 255, 255, var(--opacity-10));
    --theme-overlay-light: rgba(255, 255, 255, var(--opacity-20));
    --theme-overlay-medium-light: rgba(255, 255, 255, var(--opacity-30));
    --theme-overlay-medium: rgba(255, 255, 255, var(--opacity-50));
    --theme-overlay-medium-strong: rgba(255, 255, 255, var(--opacity-60));
    --theme-overlay-strong: rgba(255, 255, 255, var(--opacity-70));

    /* Colored overlays */
    --theme-primary-overlay: rgba(59, 130, 246, var(--opacity-20));
    --theme-success-overlay: rgba(34, 197, 94, var(--opacity-20));
    --theme-danger-overlay: rgba(239, 68, 68, var(--opacity-20));
    --theme-warning-overlay: rgba(245, 158, 11, var(--opacity-20));

    /* Legacy colored overlay names for compatibility */
    --theme-primary-overlay-lightest: rgba(0, 123, 255, var(--opacity-10));
    --theme-primary-overlay-light: rgba(0, 123, 255, var(--opacity-30));
    --theme-info-overlay-lightest: rgba(33, 150, 243, var(--opacity-10));
    --theme-success-overlay-light: rgba(76, 175, 80, var(--opacity-20));
    --theme-success-overlay-focus: rgba(34, 197, 94, var(--opacity-20));
    --theme-purple-overlay-lightest: rgba(108, 92, 231, var(--opacity-20));
    --theme-purple-overlay-light: rgba(93, 92, 222, var(--opacity-10));
    --theme-purple-overlay-medium: rgba(93, 92, 222, var(--opacity-30));
    --theme-danger-overlay-light: rgba(220, 53, 69, var(--opacity-20));
    --theme-danger-overlay-focus: rgba(220, 38, 38, var(--opacity-20));
    --theme-danger-overlay-medium: rgba(220, 53, 69, var(--opacity-30));
    --theme-danger-overlay-red-light: rgba(254, 200, 200, var(--opacity-20));
    --theme-danger-overlay-red-medium: rgba(254, 100, 100, var(--opacity-40));
    --theme-warning-overlay-medium: rgba(255, 193, 7, var(--opacity-50));
    --theme-warning-overlay-yellow: rgba(255, 243, 205, var(--opacity-95));
    --theme-text-on-primary: var(--color-white);

    /* ========== NAVIGATION ========== */
    --theme-menu-bg: var(--color-white);
    --theme-menu-border: var(--color-gray-400);
    --theme-menu-text: var(--color-gray-900);
    --theme-menu-text-disabled: var(--color-gray-400);
    --theme-menu-hover-bg: rgba(0, 123, 255, var(--opacity-10));

    --theme-header-bg: var(--color-gray-50);
    --theme-header-border: var(--color-gray-400);

    /* ========== BACKDROP EFFECTS ========== */
    --theme-backdrop-blur: none;

    /* ========== CARD COMPONENT ========== */
    --theme-card-bg: var(--color-white);
    --theme-card-border: var(--color-gray-200);
    --theme-card-hover-bg: var(--color-gray-50);
    --theme-card-hover-border: var(--color-gray-400);
    --theme-card-active-bg: var(--color-gray-200);
    --theme-card-active-border: var(--color-blue-400);
    --theme-card-header-bg: var(--color-gray-50);
    --theme-card-footer-bg: var(--color-gray-50);

    /* ========== INPUT COMPONENT ========== */
    --theme-input-bg: var(--color-white);
    --theme-input-border: var(--color-gray-300);
    --theme-input-color: var(--color-gray-900);
    --theme-input-placeholder: var(--color-gray-400);
    --theme-input-focus-border: var(--color-blue-400);
    --theme-input-focus-shadow: rgba(59, 130, 246, var(--opacity-10));
    --theme-input-disabled-bg: var(--color-gray-200);

    /* ========== DROPDOWN COMPONENT ========== */
    --theme-dropdown-bg: rgba(0, 0, 0, var(--opacity-85));
    --theme-dropdown-hover-bg: var(--color-gray-800);
    --theme-dropdown-selected-bg: var(--color-gray-700);
    --theme-dropdown-border: var(--color-gray-300);
    --theme-dropdown-text: var(--theme-text-primary);

    /* ========== BUTTON COMPONENT ========== */
    /* All buttons: Darker normal, lighter hover */

    /* Primary Button */
    --theme-btn-primary-bg: var(--color-gray-200);
    --theme-btn-primary-color: var(--color-gray-900);
    --theme-btn-primary-hover-bg: var(--color-gray-100);

    /* Secondary Button */
    --theme-btn-secondary-bg: var(--color-gray-200);
    --theme-btn-secondary-color: var(--color-gray-900);
    --theme-btn-secondary-hover-bg: var(--color-gray-100);
    --theme-btn-secondary-border: var(--color-gray-300);

    /* Primary Button (Blue - default action buttons) */
    --theme-btn-primary-bg: var(--color-blue-400);
    --theme-btn-primary-border: var(--color-blue-500);
    --theme-btn-primary-hover-bg: var(--color-blue-500);
    --theme-btn-primary-hover-border: var(--color-blue-600);

    /* Success Button (Green - enabled/positive states) */
    --theme-btn-success-bg: var(--color-green-500);
    --theme-btn-success-color: white;
    --theme-btn-success-hover-bg: var(--color-green-600);
    --theme-btn-success-border: var(--color-green-700);
    --theme-btn-success-hover-border: var(--color-green-800);

    /* Disabled Button (Gray - inactive/disabled states) */
    --theme-btn-disabled-bg: var(--color-gray-200);
    --theme-btn-disabled-border: var(--color-gray-200);
    --theme-btn-disabled-hover-bg: var(--color-gray-700);
    --theme-btn-disabled-hover-border: var(--color-gray-700);

    /* Danger Button (Red - destructive actions) */
    --theme-btn-danger-bg: var(--color-red-600);
    --theme-btn-danger-color: white;
    --theme-btn-danger-hover-bg: var(--color-red-700);
    --theme-btn-danger-border: var(--color-red-700);
    --theme-btn-danger-hover-border: var(--color-red-800);

    /* Warning Button */
    --theme-btn-warning-bg: var(--color-gray-200);
    --theme-btn-warning-color: var(--color-gray-900);
    --theme-btn-warning-hover-bg: var(--color-gray-100);

    /* Unread/Alert Button State */
    --theme-btn-unread-bg: var(--color-red-600);
    --theme-btn-unread-color: white;
    --theme-btn-unread-border: var(--color-red-600);

    /* Ghost Button */
    --theme-btn-ghost-hover-bg: var(--color-gray-100);

    /* ========== BADGE COMPONENT ========== */
    /* Default Badge */
    --theme-badge-bg: var(--color-gray-200);
    --theme-badge-color: var(--color-gray-900);

    /* Success Badge (Green) */
    --theme-badge-success-bg: var(--color-green-200);
    --theme-badge-success-color: var(--color-green-800);

    /* Warning Badge (Amber) */
    --theme-badge-warning-bg: var(--color-yellow-100);
    --theme-badge-warning-color: var(--color-orange-700);

    /* Danger Badge (Red) */
    --theme-badge-danger-bg: var(--color-red-100);
    --theme-badge-danger-color: var(--color-red-600);

    /* Info Badge (Blue) */
    --theme-badge-info-bg: var(--color-blue-100);
    --theme-badge-info-color: var(--color-blue-400);

    /* ========== COUNTER BADGES ========== */
    /* Total counter (gray/neutral) */
    --theme-counter-total-bg: var(--color-gray-600);
    --theme-counter-total-color: white;

    /* Unread counter (red/danger) */
    --theme-counter-unread-bg: var(--color-red-600);
    --theme-counter-unread-color: white;

    /* ========== LINK COLORS ========== */
    --theme-link-color: var(--color-blue-400);
    --theme-link-hover-color: var(--color-blue-500);

    /* ========== ACCENT COLORS ========== */
    --theme-accent-primary: var(--color-blue-400);
    --theme-accent-secondary: var(--color-purple-500);

    /* ========== FOCUS STATES ========== */
    --theme-focus-ring: var(--theme-primary-overlay);
    --theme-focus-color: var(--color-blue-500);

    /* ========== UNREAD STATES ========== */
    --theme-unread-bg: rgba(239, 68, 68, var(--opacity-10));
    --theme-unread-bg-staff: rgba(59, 130, 246, var(--opacity-10));
    --theme-unread-border: var(--color-red-500);

    /* ========== PAGE-SPECIFIC (Consolidated) ========== */
    /* Most pages use same card background */
    --theme-page-section-bg: var(--theme-card-bg);
    --theme-page-heading-color: var(--color-gray-900);
    --theme-page-text-color: var(--color-gray-900);

    /* ========== UI ELEMENTS ========== */
    /* Leaderboard */
    --theme-leaderboard-entry-bg: var(--color-white);
    --theme-leaderboard-entry-hover-bg: var(--color-gray-50);
    --theme-leaderboard-my-rank-border: var(--color-blue-400);
    --theme-leaderboard-my-rank-shadow: 0 0 10px rgba(59, 130, 246, var(--opacity-40));

    /* Forum/Messages/Support (Unified) */
    --theme-post-bg: var(--color-white);
    --theme-post-hover-bg: var(--color-gray-50);
    --theme-post-header-bg: var(--color-gray-50);
    --theme-post-text: var(--color-gray-900);
    --theme-post-text-secondary: var(--color-gray-600);

    /* Support Tickets Status */
    --theme-ticket-status-new-bg: var(--color-green-100);
    --theme-ticket-status-new-color: var(--color-green-800);
    --theme-ticket-status-responded-bg: var(--color-blue-100);
    --theme-ticket-status-responded-color: var(--color-blue-800);
    --theme-ticket-status-resolved-bg: var(--color-gray-200);
    --theme-ticket-status-resolved-color: var(--color-gray-600);

    /* Admin Tables */
    --theme-admin-table-bg: var(--color-white);
    --theme-admin-table-header-bg: var(--color-gray-50);
    --theme-admin-table-hover-bg: rgba(59, 130, 246, var(--opacity-10));

    /* Badge gray variants */
    --theme-badge-gray-bg: var(--color-gray-200);
    --theme-badge-gray-text: var(--color-gray-900);
    --theme-badge-danger-text: var(--color-red-600);

    /* Menu active state */
    --theme-menu-active-bg: rgba(0, 123, 255, var(--opacity-20));

    /* Modal/Dialog */
    --theme-modal-bg: var(--color-white);
    --theme-modal-backdrop: rgba(0, 0, 0, var(--opacity-50));

    /* Section Title */
    --theme-section-title-bg: var(--color-gray-50);
}

/* ========== APPLY THEME STYLES ========== */

body[data-theme="original"] {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

body[data-theme="original"] .menu-bar {
    background: var(--theme-menu-bg);
}

body[data-theme="original"] .header-bar {
    background: var(--theme-header-bg);
}

/* Unified menu styling - applies to all menus via .menu-base */
body[data-theme="original"] .menu-base {
    color: var(--theme-menu-text);
}

/* Scrollbar */
body[data-theme="original"] {
    --theme-scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --theme-scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
}