/* =============================================================================
   theme-dark.css — Unified Dark Theme
   
   Single source of truth for all dark theme color variables.
   Consolidates: variable_dark.css, variables_default_dark.css, 
                 dark_default_variable.css
   ============================================================================= */

:root {
  /* =========================
     Surface Colors
  ========================= */
  --color-surface-primary: #181818;
  --color-surface-secondary: #212121;
  --color-surface-tertiary: #303030;
  --color-surface-elevated: #212121;
  --color-surface-light: #0f0f0f;
  --color-surface-grid: #212121;
  --color-surface-transparent: rgba(0, 0, 0, 0);
  --color-surface-rgb: 0, 0, 0;

  /* =========================
     Text Colors
  ========================= */
  --color-text-primary: #ffffff;
  --color-text-secondary: #aaaaaa;
  --color-text-tertiary: #9e9e9e;
  --color-text-inverse: #000000;
  --color-text-black: #000000;
  --color-text-heading: #eeeeee;
  --color-text-rgb: 255, 255, 255;

  /* =========================
     Brand Colors
  ========================= */
  --color-brand-primary: #e25565;
  --color-brand-primary-hover: #c12f3d;
  --color-brand-primary-rgb: 215, 55, 71;
  --color-brand-secondary: #313131;
  --color-brand-secondary-hover: #1f1f1f;
  --color-brand-accent: #d50c22;

  /* =========================
     Border
  ========================= */
  --color-border-default: #303030;
  --color-border-subtle: #212121;
  --color-border-input: #303030;
  --color-border-muted: #383838;

  /* =========================
     Header
  ========================= */
  --color-header-bg: #171717;
  --color-header-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --color-header-icon: #ffffff;
  --color-header-text: #ffffff;

  /* =========================
     Sidebar
  ========================= */
  --color-sidebar-bg: #181818;
  --color-sidebar-text: #ffffff;
  --color-sidebar-hover: #303030;
  --color-sidebar-title: #ffffff;
  --color-sidebar-icon: #ffffff;
  --color-sidebar-search-bg: #212121;
  --color-sidebar-search-border: #303030;
  --color-sidebar-search-text: #ffffff;

  /* =========================
     Form
  ========================= */
  --color-input-bg: #0f0f0f;
  --color-input-border: #303030;
  --color-input-text: #ffffff;
  --color-input-focus-bg: #212121;
  --color-input-placeholder: #9e9e9e;
  --color-input-label: #ffffff;

  /* =========================
     Dropdown
  ========================= */
  --color-dropdown-bg: #212121;
  --color-dropdown-text: #ffffff;
  --color-dropdown-hover: #383838;

  /* =========================
     Overlay
  ========================= */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.6);
  --color-overlay-heavy: rgba(0, 0, 0, 0.9);

  /* =========================
     Bottom Menu
  ========================= */
  --color-bottom-menu-bg: #181818;
  --color-bottom-menu-text: #ffffff;
  --color-bottom-menu-active: #d50c22;

  /* =========================
     Buttons
  ========================= */
  --color-btn-primary-bg: #d73747;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-border: #d73747;
  --color-btn-primary-hover: #c12f3d;

  --color-btn-secondary-bg: #313131;
  --color-btn-secondary-text: #ffffff;
  --color-btn-secondary-border: #313131;
  --color-btn-secondary-hover: #1f1f1f;

  --color-btn-dark-bg: #2f2f2f;
  --color-btn-dark-text: #ffffff;
  --color-btn-dark-border: #000000;
  --color-btn-dark-hover: #1a1a1a;

  --color-btn-light-bg: #3a3b3c;
  --color-btn-light-text: #ffffff;
  --color-btn-light-border: #303030;
  --color-btn-light-hover: #4a4b4c;

  --color-btn-font-weight: 600;
  --color-btn-radius: 6px;
  --color-btn-disabled-opacity: 0.6;

  /* =========================
     Icons
  ========================= */
  --color-icon-bg: transparent;
  --color-icon-text: #ffffff;
  --color-icon-hover: #383838;

  /* =========================
     Slider / Banner
  ========================= */
  --color-slider-bg: #0f0f0f;
  --color-slider-bg-rgb: 24, 24, 24;
  --color-slider-text: #ffffff;

  /* =========================
     Labels
  ========================= */
  --color-label-hot: #FF1744;
  --color-label-featured: #2296F3;
  --color-label-sponsored: #369B39;

  /* =========================
     Validation / Status
  ========================= */
  --color-success: #198754;
  --color-info: #0dcaf0;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-orange: #fd7e14;

  /* =========================
     Verify Badge
  ========================= */
  --color-verify-bg: transparent;
  --color-verify-text: transparent;
  --color-verify-badge: #1da1f2;

  /* =========================
     Social Media
  ========================= */
  --color-facebook: #1877F2;
  --color-google: #DB4437;
  --color-twitter: #000000;
  --color-instagram: #E1306C;
  --color-pinterest: #E60023;
  --color-vimeo: #1AB7EA;
  --color-youtube: #FF0000;

  /* =========================
     Rating
  ========================= */
  --color-rating-yellow: #ffcc66;
  --color-rating-orange: #ea731c;

  /* =========================
     Loading / Spinner
  ========================= */
  --color-loading-bg: #d50c22;
  --color-spinner: #d50c22;

  /* =========================
     Popup Search
  ========================= */
  --color-popup-input-border: #303030;
  --color-popup-input-bg: #212121;
  --color-popup-input-text: #ffffff;
  --color-popup-head-bg: #181818;
  --color-popup-body-bg: #181818;

  /* =========================
     Video Thumbnail
  ========================= */
  --color-video-thumb-bg: #181818;
  --color-video-thumb-overlay: #000000;
  --color-video-thumb-overlay-opacity: 0.7;
  --color-video-thumb-text: #ffffff;
  --color-video-thumb-icon-bg: #585858;
  --color-video-thumb-icon-color: #cecece;

  /* =========================
     Channel Thumbnail
  ========================= */
  --color-channel-bg: #181818;
  --color-channel-name: #ffffff;
  --color-channel-text: #cccccc;
  --color-channel-subs-btn-bg: #656060;
  --color-channel-subs-btn-text: #ffffff;

  /* =========================
     Cards (Blog, Member, Artist)
  ========================= */
  --color-card-bg: #181818;
  --color-card-text: #ffffff;
  --color-card-text-light: #cccccc;
  --color-card-member-overlay: #000000;
  --color-card-member-overlay-opacity: 0.5;

  /* =========================
     Playlist / Category
  ========================= */
  --color-playlist-overlay: rgba(0, 0, 0, 0.5);
  --color-playlist-text: #ffffff;
  --color-category-overlay: rgba(0, 0, 0, 0.5);
  --color-category-text: #ffffff;

  /* =========================
     Tabs
  ========================= */
  --color-tab-bg: #212121;
  --color-tab-bg-active: #d73747;
  --color-tab-text: #ffffff;
  --color-tab-text-active: #ffffff;

  /* =========================
     Form Page
  ========================= */
  --color-form-page-bg: #181818;
  --color-form-page-text: #ffffff;
  --color-form-page-input-bg: #0f0f0f;

  /* =========================
     Miscellaneous
  ========================= */
  --color-loadmore-btn: #8e4c47;
  --color-loadmore-btn-hover: #5a5757;
}