/* =============================================================================
   theme-light.css — Unified Light Theme
   
   Single source of truth for all light theme color variables.
   Consolidates: variable_white.css, variables_default_white.css, 
                 light_default_variable.css
   ============================================================================= */

:root {
  /* =========================
     Surface Colors
  ========================= */
  --color-surface-primary: #ffffff;
  --color-surface-secondary: #f3f3f3;
  --color-surface-tertiary: #e8e8e8;
  --color-surface-elevated: #ffffff;
  --color-surface-light: #f9f9f9;
  --color-surface-grid: #f3f3f3;
  --color-surface-transparent: rgba(255, 255, 255, 0);
  --color-surface-rgb: 255, 255, 255;

  /* =========================
     Text Colors
  ========================= */
  --color-text-primary: #0f0f0f;
  --color-text-secondary: #606060;
  --color-text-tertiary: #6b6b6b;
  --color-text-inverse: #ffffff;
  --color-text-black: #000000;
  --color-text-heading: #0f0f0f;
  --color-text-rgb: 0, 0, 0;

  /* =========================
     Brand Colors
  ========================= */
  --color-brand-primary: #d73747;
  --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: #dee2e6;
  --color-border-subtle: #f0f0f0;
  --color-border-input: #d9d7d7;
  --color-border-muted: #e0e0e0;

  /* =========================
     Header
  ========================= */
  --color-header-bg: #ffffff;
  --color-header-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.08);
  --color-header-icon: #0f0f0f;
  --color-header-text: #0f0f0f;

  /* =========================
     Sidebar
  ========================= */
  --color-sidebar-bg: #ffffff;
  --color-sidebar-text: #0f0f0f;
  --color-sidebar-hover: #f3f3f3;
  --color-sidebar-title: #0f0f0f;
  --color-sidebar-icon: #0f0f0f;
  --color-sidebar-search-bg: #f3f3f3;
  --color-sidebar-search-border: #dee2e6;
  --color-sidebar-search-text: #0f0f0f;

  /* =========================
     Form
  ========================= */
  --color-input-bg: #ffffff;
  --color-input-border: #d9d7d7;
  --color-input-text: #0f0f0f;
  --color-input-focus-bg: #f3f3f3;
  --color-input-placeholder: #6b6b6b;
  --color-input-label: #0f0f0f;

  /* =========================
     Dropdown
  ========================= */
  --color-dropdown-bg: #ffffff;
  --color-dropdown-text: #0f0f0f;
  --color-dropdown-hover: #f3f3f3;

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

  /* =========================
     Bottom Menu
  ========================= */
  --color-bottom-menu-bg: #ffffff;
  --color-bottom-menu-text: #000000;
  --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: #000000;
  --color-btn-dark-text: #ffffff;
  --color-btn-dark-border: #000000;
  --color-btn-dark-hover: #1a1a1a;

  --color-btn-light-bg: #f3f3f3;
  --color-btn-light-text: #0f0f0f;
  --color-btn-light-border: #dee2e6;
  --color-btn-light-hover: #e6e6e6;

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

  /* =========================
     Icons
  ========================= */
  --color-icon-bg: transparent;
  --color-icon-text: #0f0f0f;
  --color-icon-hover: #f3f3f3;

  /* =========================
     Slider / Banner
  ========================= */
  --color-slider-bg: #f3f3f3;
  --color-slider-bg-rgb: 243, 243, 243;
  --color-slider-text: #ffffff;

  /* =========================
     Labels
  ========================= */
  --color-label-hot: #FF1744;
  --color-label-featured: #d73747;
  --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: #dee2e6;
  --color-popup-input-bg: #ffffff;
  --color-popup-input-text: #0f0f0f;
  --color-popup-head-bg: #ffffff;
  --color-popup-body-bg: #ffffff;

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

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

  /* =========================
     Cards (Blog, Member, Artist)
  ========================= */
  --color-card-bg: #ffffff;
  --color-card-text: #000000;
  --color-card-text-light: #767676;
  --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: #ffffff;
  --color-tab-bg-active: #d73747;
  --color-tab-text: #6b7280;
  --color-tab-text-active: #111827;

  /* =========================
     Form Page
  ========================= */
  --color-form-page-bg: #ffffff;
  --color-form-page-text: #000000;
  --color-form-page-input-bg: #f9f9f9;

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