/* ============================================================================
   Modern UI Variables - Glassmorphism Design Tokens
   ============================================================================

   ARCHITECTURE OVERVIEW
   ---------------------
   The Modern UI uses a "variable override" pattern:
   - Base CSS (classic) uses: var(--modern-var, classic-fallback)
   - Classic mode: --modern-var undefined → uses fallback value
   - Modern mode: --modern-var defined here → uses modern value

   NAMING CONVENTIONS
   ------------------
   Base variables (defined in themes.css :root, work in both modes):
     --bg-color, --text-color, --accent-color     Theme colors
     --spacing-*                                   Spacing scale
     --overlay-*, --transition-*                   Utilities

   Modern-only variables (defined here, require fallbacks in base CSS):
     --surface-*          Glassmorphism surface colors
     --gradient-*         Gradient backgrounds
     --blur-*             Backdrop blur effects
     --glow-*             Colored glow effects

   HOW TO ADD NEW FEATURES
   -----------------------
   1. For features that work in BOTH modes:
      - Use base variables from themes.css (--accent-color, --spacing-base, etc.)
      - These always have values in both classic and modern

   2. For modern-only enhancements:
      - Define the variable here in body.modern-ui { }
      - In base CSS, use: var(--modern-var, classic-fallback)
      - Example: background: var(--surface-secondary, rgba(0,0,0,0.3));

   3. For color tints (rgba with theme colors):
      - Use the pre-computed --*-tint-* variables below
      - Or use: rgba(var(--accent-color-rgb), 0.1)

   FALLBACK PATTERN EXAMPLES
   -------------------------
   background: var(--surface-primary, var(--bg-color));
   border: var(--ui-border-light, 1px solid var(--dim-color));
   box-shadow: var(--ui-shadow-md, none);
   transition: all var(--transition-fast, 0.15s ease);
   ============================================================================ */

body.modern-ui,
:root[data-ui="modern"] {
    /* === UI Mode Foundation Tokens (Layer B: modern overrides) === */
    /* Border Radius */
    --ui-radius-xs: 4px;
    --ui-radius-sm: 6px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-radius-xl: 20px;
    --ui-radius-full: 50px;

    /* Borders */
    --ui-border-subtle: 1px solid rgba(255, 255, 255, 0.05);
    --ui-border-light: 1px solid rgba(255, 255, 255, 0.08);
    --ui-border-accent: 1px solid rgba(var(--accent-color-rgb), 0.3);

    /* Shadows */
    --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
    --ui-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    /* Surfaces */
    --ui-surface-1: rgba(16, 24, 40, 0.8);
    --ui-surface-2: rgba(30, 41, 59, 0.6);
    --ui-surface-hover: rgba(var(--accent-color-rgb), 0.1);

    /* Focus */
    --ui-focus-ring: 0 0 0 3px rgba(var(--accent-color-rgb), 0.15);

    /* Motion / Transforms */
    --ui-transform-hover-lift: translateY(-2px);
    --ui-transform-active-press: translateY(1px);

    /* === Surfaces (glassmorphism backgrounds) === */
    --surface-primary: rgba(16, 24, 40, 0.8);
    --surface-secondary: rgba(30, 41, 59, 0.6);
    --surface-tertiary: rgba(15, 23, 42, 0.9);
    --surface-hover: rgba(var(--accent-color-rgb), 0.1);

    /* === Gradients === */
    --gradient-primary: linear-gradient(135deg, var(--accent-color) 0%, var(--special-color) 100%);
    --gradient-header: linear-gradient(180deg, rgba(var(--accent-color-rgb), 0.15) 0%, rgba(var(--accent-color-rgb), 0.05) 100%);
    --gradient-surface: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.1) 0%, var(--surface-secondary) 100%);

    /* === Effects === */
    --blur-light: blur(8px);
    --blur-medium: blur(12px);

    /* Colored glows */
    --glow-accent: 0 0 20px rgba(var(--accent-color-rgb), 0.3);
    --glow-success: 0 0 12px rgba(var(--success-color-rgb), 0.4);

    /* === Component Tokens (Layer C: modern overrides) === */
    /* Panels */
    --panel-bg: var(--ui-surface-1);
    --panel-border: var(--ui-border-light);
    --panel-radius: var(--ui-radius-lg);
    --panel-shadow: var(--ui-shadow-md);
    --panel-backdrop-filter: blur(12px);
    --panel-header-bg: var(--gradient-header);
    --panel-header-color: var(--text-color);
    --panel-header-padding: 12px 16px;
    --panel-header-font-size: 0.85rem;
    --panel-header-letter-spacing: 0.05em;
    --panel-header-accent-width: 3px;

    /* Buttons */
    --btn-bg: var(--accent-color);
    --btn-fg: var(--bg-color);
    --btn-border: none;
    --btn-radius: var(--ui-radius-sm);
    --btn-shadow: var(--ui-shadow-sm);
    --btn-hover-bg: var(--special-color);
    --btn-hover-transform: var(--ui-transform-hover-lift);
    --btn-hover-shadow: var(--ui-shadow-md), 0 0 10px rgba(var(--accent-color-rgb), 0.2);
    --btn-active-transform: var(--ui-transform-active-press);
    --btn-disabled-opacity: 0.5;
    --btn-variant-secondary-bg: var(--ui-surface-2);
    --btn-variant-ghost-border: 1px solid var(--accent-color);
    --btn-variant-danger-bg: linear-gradient(135deg, var(--error-color) 0%, #c62828 100%);
    --btn-secondary-bg: var(--btn-variant-secondary-bg);
    --btn-secondary-color: var(--text-color);
    --btn-secondary-border: var(--ui-border-light);
    --btn-secondary-hover-bg: var(--ui-surface-hover);
    --btn-secondary-hover-border-color: rgba(var(--accent-color-rgb), 0.3);
    --btn-secondary-hover-shadow: 0 0 10px rgba(var(--accent-color-rgb), 0.15);
    --btn-ghost-bg: transparent;
    --btn-ghost-color: var(--accent-color);
    --btn-ghost-border: var(--btn-variant-ghost-border);
    --btn-ghost-shadow: none;
    --btn-ghost-hover-bg: rgba(var(--accent-color-rgb), 0.1);
    --btn-ghost-hover-shadow: 0 0 14px rgba(var(--accent-color-rgb), 0.3);
    --btn-danger-bg: var(--btn-variant-danger-bg);
    --btn-danger-color: #ffffff;
    --btn-danger-hover-bg: linear-gradient(135deg, var(--error-color) 0%, #e53935 100%);
    --btn-danger-hover-color: var(--btn-danger-color);
    --btn-danger-shadow: none;
    --btn-danger-hover-shadow: 0 0 14px rgba(var(--error-color-rgb), 0.4);
    --btn-success-bg: linear-gradient(135deg, var(--success-color) 0%, #2e7d32 100%);
    --btn-success-color: var(--bg-color);
    --btn-success-shadow: none;
    --btn-success-hover-shadow: 0 0 14px rgba(var(--success-color-rgb), 0.4);
    --btn-sm-padding: 4px 10px;
    --btn-sm-font-size: 0.75rem;
    --btn-lg-padding: 10px 22px;
    --btn-lg-font-size: 1rem;
    --btn-lg-radius: var(--ui-radius-lg);
    --btn-icon-padding: 6px;
    --btn-icon-size: 32px;

    /* Inputs */
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: var(--ui-border-light);
    --input-radius: var(--ui-radius-sm);
    --input-padding: 10px 14px;
    --input-font-size: 0.95rem;
    --input-placeholder-color: var(--dim-color);
    --input-placeholder-opacity: 0.8;
    --input-hover-border-color: rgba(var(--accent-color-rgb), 0.3);
    --input-hover-shadow: none;
    --input-focus-shadow: var(--ui-focus-ring);
    --input-focus-bg: rgba(0, 0, 0, 0.4);
    --checkbox-appearance: none;
    --checkbox-width: 20px;
    --checkbox-min-width: 20px;
    --checkbox-height: 20px;
    --checkbox-flex: 0 0 auto;
    --checkbox-padding: 0;
    --checkbox-margin: 0;
    --checkbox-bg: rgba(0, 0, 0, 0.3);
    --checkbox-border: var(--ui-border-light);
    --checkbox-radius: var(--ui-radius-xs);
    --checkbox-position: relative;
    --checkbox-accent: var(--accent-color);
    --checkbox-transition: all var(--transition-fast);
    --checkbox-hover-border-color: rgba(var(--accent-color-rgb), 0.5);
    --checkbox-checked-bg: var(--gradient-primary);
    --checkbox-checked-border-color: var(--accent-color);
    --checkbox-check-content: '';
    --checkbox-check-left: 6px;
    --checkbox-check-top: 2px;
    --checkbox-check-width: 5px;
    --checkbox-check-height: 10px;
    --checkbox-check-border: solid white;
    --checkbox-check-border-width: 0 2px 2px 0;
    --checkbox-check-transform: rotate(45deg);
    --checkbox-focus-outline: none;
    --checkbox-focus-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2);
    --select-appearance: none;
    --select-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    --select-bg-position: right 12px center;
    --select-padding-right: 36px;
    --select-option-bg: var(--bg-color);
    --select-option-color: var(--text-color);
    --select-optgroup-bg: var(--bg-color);
    --select-optgroup-color: var(--accent-color);
    --select-optgroup-font-weight: 600;

    /* Tabs */
    --tab-bg: transparent;
    --tab-color: var(--text-color);
    --tab-padding: 10px 16px;
    --tab-active-bg: rgba(var(--accent-color-rgb), 0.15);
    --tab-active-color: var(--accent-color);
    --tab-active-border-color: var(--accent-color);

    /* Menu Links */
    --menu-link-padding: 4px 6px;
    --menu-content-padding: 12px;
    --menu-content-gap: 4px;
    --menu-link-border: none;
    --menu-link-radius: var(--ui-radius-sm);
    --menu-link-font-size: 0.9rem;
    --menu-link-font-weight: 500;
    --menu-link-bg: none;
    --menu-link-hover-bg: rgba(var(--accent-color-rgb), 0.1);
    --menu-link-hover-border-color: transparent;
    --menu-link-hover-color: var(--accent-color);
    --menu-link-hover-transform: translateX(4px);
    --menu-link-hover-box-shadow: none;
    --menu-link-hitarea-inset: -2px -6px -2px -2px;
    --menu-link-hover-shift: 4px;
    --menu-link-accent-bar-width: 3px;
    --menu-link-focus-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.4);
    --menu-link-active-bg: rgba(var(--accent-color-rgb), 0.15);
    --menu-link-active-color: var(--accent-color);
    --menu-link-active-box-shadow: none;
    --menu-mobile-select-padding: 12px 16px;
    --menu-mobile-select-bg: var(--surface-secondary);
    --menu-mobile-select-color: var(--text-color);
    --menu-mobile-select-border: var(--ui-border-light);
    --menu-mobile-select-radius: var(--ui-radius-md);
    --menu-mobile-select-font-size: 0.9rem;
    --menu-separator-border-top: var(--ui-border-subtle);
    --menu-separator-margin: 10px 8px;

    /* Profile link */
    --profile-link-padding: 12px 16px;
    --profile-link-border: var(--ui-border-light);
    --profile-link-radius: var(--ui-radius-md);
    --profile-link-bg: rgba(0, 0, 0, 0.2);
    --profile-link-font-weight: 600;
    --profile-link-accent-border-color: var(--ui-border-light);
    --profile-link-hover-border-color: rgba(var(--accent-color-rgb), 0.4);
    --profile-link-hover-bg: rgba(var(--accent-color-rgb), 0.1);
    --profile-link-hover-color: var(--accent-color);
    --profile-link-hover-transform: none;
    --profile-link-hover-box-shadow: var(--glow-accent);

    /* Chat */
    --chat-tabs-bg: var(--overlay-medium);
    --chat-tab-radius: var(--ui-radius-full);
    --chat-tab-border: var(--ui-border-light);

    /* Progress */
    --progress-height: 8px;
    --progress-with-label-height: 22px;
    --progress-bg: rgba(0, 0, 0, 0.3);
    --progress-border: none;
    --progress-shadow: none;
    --progress-fill-bg: var(--gradient-primary);
    --progress-fill-transition: width 0.3s ease;
    --progress-radius: var(--ui-radius-full);
    --progress-shimmer-opacity: 1;
    --progress-shimmer-animation: progressShimmer 2s infinite;
    --progress-label-inside-color: white;
    --progress-label-inside-font-size: 0.7rem;
    --progress-label-inside-font-weight: 600;
    --progress-label-inside-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --progress-label-above-font-size: 0.75rem;
    --progress-label-above-font-weight: 500;
    --progress-label-above-margin-bottom: 4px;
    --prog-current-bg: linear-gradient(135deg, var(--accent-color) 0%, var(--special-color) 100%);
    --prog-level-bg: linear-gradient(135deg, var(--success-color) 0%, #4caf50 100%);
    --prog-hack-xp-bg: linear-gradient(135deg, var(--special-color) 0%, var(--warning-color) 100%);

    /* Cards */
    --card-padding: 14px 16px;

    /* Shared panel/content controls */
    --content-panel-body-padding: 16px;
    --content-placeholder-border: 1px dashed rgba(var(--accent-color-rgb), 0.2);
    --content-placeholder-radius: var(--ui-radius-md);
    --content-placeholder-padding: 24px;
    --content-placeholder-gap: 6px;
    --content-placeholder-bg: rgba(0, 0, 0, 0.2);
    --settings-group-border: var(--ui-border-light);
    --settings-group-radius: var(--ui-radius-md);
    --settings-group-padding: 16px;
    --settings-group-margin-bottom: 16px;
    --settings-group-bg: rgba(0, 0, 0, 0.2);
    --settings-group-transition-speed: 0.15s;
    --settings-group-hover-border-color: rgba(var(--accent-color-rgb), 0.4);
    --settings-group-hover-bg: rgba(var(--accent-color-rgb), 0.05);
    --settings-group-select-margin-top: 8px;
    --settings-group-stat-label-border-bottom: none;
    --settings-group-stat-label-margin-bottom: 8px;
    --stats-table-container-padding: 16px;
    --stats-col-border-right: var(--ui-border-subtle);
    --stats-col-padding: 0 20px;
    --stat-row-padding: 4px 0;
    --stat-row-hover-bg: rgba(var(--accent-color-rgb), 0.05);
    --stat-label-border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.2);
    --user-info-content-padding: 20px;
    --user-info-content-gap: 16px;
    --user-info-bars-gap: 6px;
    --stats-section-border: 1px solid transparent;
    --stats-section-radius: var(--ui-radius-md);
    --stats-section-padding: 16px;
    --stats-section-bg: rgba(0, 0, 0, 0.15);
    --stats-section-margin-bottom: 16px;
    --stats-section-last-margin-bottom: 0;
    --stats-grid-gap: 10px;
    --stats-grid-padding: 0.5rem 0;
    --stat-item-padding: 8px 12px;
    --stat-item-bg: rgba(0, 0, 0, 0.2);
    --stat-item-radius: var(--ui-radius-sm);
    --stat-item-border: var(--ui-border-subtle);
    --stat-item-transition: all var(--transition-fast);
    --stat-item-hover-border-color: rgba(var(--accent-color-rgb), 0.2);
    --stat-item-hover-bg: rgba(var(--accent-color-rgb), 0.05);
    --stat-item-value-color: var(--accent-color);
    --stat-item-value-font-weight: 600;
    --vertical-tabs-border-right: var(--ui-border-light);
    --section-header-font-weight: 600;
    --section-header-color: var(--accent-color);
    --section-header-margin-bottom: 12px;
    --section-header-padding-bottom: 8px;
    --section-header-border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.2);
    --section-header-font-size: 0.8rem;
    --section-header-letter-spacing: 0.05em;
    --syndicate-leave-btn-padding: 8px 12px;
    --syndicate-leave-btn-font-size: 0.75rem;
    --syndicate-leave-btn-bg: var(--btn-variant-danger-bg);
    --syndicate-leave-btn-color: white;
    --syndicate-leave-btn-radius: var(--ui-radius-md);
    --syndicate-leave-btn-font-weight: 600;
    --syndicate-leave-btn-shadow: 0 2px 8px rgba(var(--error-color-rgb), 0.3);
    --syndicate-leave-btn-hover-shadow: 0 4px 12px rgba(var(--error-color-rgb), 0.4);
    --syndicate-leave-btn-hover-transform: translateY(-1px);

    /* Shared breakdown table tokens */
    --breakdown-table-width: 100%;
    --breakdown-table-border-collapse: separate;
    --breakdown-table-border-spacing: 0;
    --breakdown-table-font-size: 0.9em;
    --breakdown-th-bg: rgba(0, 0, 0, 0.3);
    --breakdown-th-padding: 10px 12px;
    --breakdown-th-border-bottom: var(--ui-border-light);
    --breakdown-th-color: var(--text-color);
    --breakdown-th-font-weight: 600;
    --breakdown-th-font-size: 0.75rem;
    --breakdown-th-letter-spacing: 0.05em;
    --breakdown-th-text-transform: none;
    --breakdown-th-first-radius: var(--ui-radius-sm) 0 0 0;
    --breakdown-th-last-radius: 0 var(--ui-radius-sm) 0 0;
    --breakdown-td-padding: 10px 12px;
    --breakdown-td-border-bottom: var(--ui-border-subtle);
    --breakdown-td-transition: background var(--transition-fast);
    --breakdown-row-hover-bg: transparent;
    --breakdown-cell-hover-bg: rgba(var(--accent-color-rgb), 0.05);
    --breakdown-total-color: var(--accent-color);

    /* Shared dropdown tokens */
    --dropdown-bg: var(--surface-secondary);
    --dropdown-border: var(--ui-border-light);
    --dropdown-radius: var(--ui-radius-md);
    --dropdown-padding: 12px 16px;
    --dropdown-color: var(--text-color);
    --dropdown-font-size: 0.9rem;
    --dropdown-focus-border-color: var(--accent-color);
    --dropdown-focus-shadow: var(--ui-focus-ring);

    /* Achievement/profile progress tokens */
    --achievement-progress-bg: rgba(0, 0, 0, 0.3);
    --achievement-progress-radius: var(--ui-radius-full);
    --achievement-progress-fill-bg: var(--gradient-primary);
    --achievement-progress-text-color: var(--text-color);
    --achievement-progress-text-opacity: 0.85;
    --profile-achievement-bg: rgba(0, 0, 0, 0.3);
    --profile-achievement-radius: var(--ui-radius-full);
    --profile-achievement-fill-bg: var(--gradient-primary);

}