/* ===================================
   GLLIT.tv - THEME SYSTEM
   Easy customization for comebacks!
   =================================== */

/* Font Face Declaration */
@font-face {
    font-family: 'ILLIT';
    src: url('../assets/images/kkberkbm.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* ===================================
       PRIMARY COLORS - Change these for different comebacks!
       =================================== */
    --primary-pink: #FFADD4;
    --primary-light-pink: #FFB8DC;
    --primary-pastel: #FFDDED;
    --secondary-lavender: #DCC5E8;
    --secondary-blue: #C5D5E8;
    --accent-color: #FF8EC7;
    
    /* ===================================
       BACKGROUND COLORS
       =================================== */
    --bg-main: #FFF5F9;
    --bg-sidebar: linear-gradient(180deg, #FFDBE8 0%, #F0E0F8 100%);
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-overlay: rgba(255, 182, 217, 0.08);
    
    /* ===================================
       TEXT COLORS
       =================================== */
    --text-primary: #2D2D2D;
    --text-secondary: #666666;
    --text-light: #999999;
    --text-white: #FFFFFF;
    
    /* ===================================
       UI ELEMENT COLORS
       =================================== */
    --border-color: rgba(255, 182, 217, 0.3);
    --shadow-color: rgba(255, 142, 199, 0.2);
    --hover-color: #FFD4E9;
    
    /* ===================================
       FONTS
       =================================== */
    --font-main: 'ILLIT', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-fallback: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* ===================================
       SPACING & SIZING
       =================================== */
    --sidebar-width: 280px;
    --header-height: 70px;
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    
    /* ===================================
       BORDER RADIUS
       =================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    
    /* ===================================
       TRANSITIONS
       =================================== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ===================================
       SHADOWS
       =================================== */
    --shadow-sm: 0 2px 8px var(--shadow-color);
    --shadow-md: 0 4px 16px var(--shadow-color);
    --shadow-lg: 0 8px 32px var(--shadow-color);
}

/* ===================================
   ALTERNATIVE THEMES (Examples)
   =================================== */

/* Uncomment to use a different theme */

/* MAGNETIC Theme (Blue/Electric) */
/*
:root {
    --primary-pink: #6B9FFF;
    --primary-light-pink: #A8C9FF;
    --primary-pastel: #E8F1FF;
    --secondary-lavender: #B8A8FF;
    --secondary-blue: #8BC7FF;
    --accent-color: #4D7FFF;
    --bg-sidebar: linear-gradient(180deg, #E0EDFF 0%, #E8E0FF 100%);
}
*/

/* SUPER REAL ME Theme (Bright/Energetic) */
/*
:root {
    --primary-pink: #FF6B9D;
    --primary-light-pink: #FFA8C5;
    --primary-pastel: #FFE5F0;
    --secondary-lavender: #C77DFF;
    --secondary-blue: #FF9EE5;
    --accent-color: #FF4D8F;
    --bg-sidebar: linear-gradient(180deg, #FFD0E5 0%, #F0C8FF 100%);
}
*/

/* Dark Mode Theme */
body.dark-mode {
    --primary-pink: #FF8EC7;
    --primary-light-pink: #FFB6D9;
    --primary-pastel: #2D1F2E;
    --secondary-lavender: #9D7FA8;
    --secondary-blue: #7F8FA8;
    --accent-color: #FF6BB5;
    --bg-main: #1A1A1A;
    --bg-sidebar: linear-gradient(180deg, #2D1F2E 0%, #1F1F2D 100%);
    --bg-card: rgba(45, 31, 46, 0.9);
    --bg-overlay: rgba(255, 142, 199, 0.05);
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
    --text-light: #999999;
    --border-color: rgba(255, 142, 199, 0.2);
    --shadow-color: rgba(255, 142, 199, 0.3);
}