/* =============================================
   SESLEE THEME SYSTEM - CSS Custom Properties
   ============================================= */

/* Default Theme (Current Dark Design)
   html:not([data-theme]) gives specificity (0,1,1) — same as named themes —
   so it always beats any accidental :root leaks from Vite-injected <style> tags. */
html:not([data-theme]) {
    /* Primary Backgrounds */
    --bg-primary: #313338;
    --bg-secondary: #2b2d31;
    --bg-tertiary: #1e1f22;
    --bg-chat: rgba(47, 49, 54, 0.2);
    --bg-sidebar: #2f3136;
    --bg-input: rgba(64, 68, 75, 0.6);
    --bg-input-focus: rgba(64, 68, 75, 0.8);
    --bg-container: rgba(47, 49, 54, 0.4);
    --bg-hover: rgba(4, 4, 5, 0.07);
    --bg-channel-hover: rgba(79, 84, 92, 0.4);
    --bg-channel-active: rgba(79, 84, 92, 0.6);
    --bg-message-actions: #2f3136;

    /* Accent Colors */
    --accent: #5865f2;
    --accent-hover: #4752c4;
    --accent-light: rgba(88, 101, 242, 0.1);
    --accent-medium: rgba(88, 101, 242, 0.2);
    --accent-strong: rgba(88, 101, 242, 0.3);
    --accent-border: rgba(88, 101, 242, 0.5);
    --accent-gradient: linear-gradient(45deg, #5865f2, #7289da);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #dcddde;
    --text-muted: #8e9297;
    --text-faint: #72767d;
    --text-link: #00b0f4;
    --text-placeholder: rgba(255, 255, 255, 0.5);

    /* Text with alpha */
    --text-alpha-high: rgba(255, 255, 255, 0.9);
    --text-alpha-medium: rgba(255, 255, 255, 0.7);
    --text-alpha-low: rgba(255, 255, 255, 0.6);
    --text-alpha-faint: rgba(255, 255, 255, 0.5);
    --text-alpha-muted: rgba(255, 255, 255, 0.4);

    /* Border Colors */
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: #40444b;
    --border-sidebar: #2b2d31;

    /* Status Colors */
    --status-online: #3ba55d;
    --status-idle: #f0b232;
    --status-dnd: #f23f43;
    --status-offline: #747f8d;
    --status-online-glow: rgba(59, 165, 93, 0.5);

    /* Misc */
    --shadow-primary: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --backdrop-blur: blur(10px);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
    --scrollbar-track: rgba(255, 255, 255, 0.05);

    /* Message Specific */
    --replied-bg: rgba(79, 84, 92, 0.16);
    --replied-bg-hover: rgba(79, 84, 92, 0.24);

    /* Delete / Danger */
    --danger: #ed4245;
    --danger-bg: rgba(237, 66, 69, 0.2);

    /* Tick Status */
    --tick-sent: #aaa;
    --tick-delivered: #7289da;
    --tick-seen: #3ba55d;

    /* Date Separator */
    --separator-line: #40444b;
    --separator-text: #8e9297;

    /* Modal */
    --modal-bg: rgba(0, 0, 0, 0.7);
    --modal-content-bg: linear-gradient(135deg, rgba(32, 34, 37, 0.99) 0%, rgba(40, 42, 47, 0.97) 100%);

    /* Sidebar Specific */
    --bg-elevated: #35373c;
    --bg-profile: #232428;
    --bg-floating: #111214;
    --border-floating: #3b3d44;

    /* Conversation Badge */
    --badge-bg: #5865f2;
    --badge-text: #ffffff;
}

/* Bare :root fallback — only values NOT covered by the selectors above.
   Keeps the page styled even before JS sets/removes data-theme. */
:root {
    --bg-primary: #313338;
    --bg-secondary: #2b2d31;
    --bg-tertiary: #1e1f22;
    --accent: #5865f2;
    --text-primary: #ffffff;
    --text-secondary: #dcddde;
    --text-muted: #8e9297;
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-sidebar: #2b2d31;
    --shadow-medium: rgba(0, 0, 0, 0.2);
}

/* =============================================
   DARK THEME (Deeper/Contrast Dark)
   ============================================= */
html[data-theme="dark"] {
    /* Primary Backgrounds */
    --bg-primary: #111214;
    --bg-secondary: #1a1b1e;
    --bg-tertiary: #0c0c0d;
    --bg-chat: rgba(17, 18, 20, 0.4);
    --bg-sidebar: rgba(18, 19, 22, 0.95);
    --bg-input: rgba(30, 32, 36, 0.8);
    --bg-input-focus: rgba(40, 42, 48, 0.9);
    --bg-container: rgba(17, 18, 20, 0.6);
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-channel-hover: rgba(255, 255, 255, 0.08);
    --bg-channel-active: rgba(255, 255, 255, 0.13);
    --bg-message-actions: #1a1b1e;

    /* Accent kept the same for brand consistency */
    --accent: #5865f2;
    --accent-hover: #4752c4;
    --accent-light: rgba(88, 101, 242, 0.08);
    --accent-medium: rgba(88, 101, 242, 0.15);
    --accent-strong: rgba(88, 101, 242, 0.25);
    --accent-border: rgba(88, 101, 242, 0.4);

    /* Text - slightly adjusted for deeper bg */
    --text-primary: #e0e0e0;
    --text-secondary: #b5b8bb;
    --text-muted: #7a7e83;
    --text-faint: #62666b;

    --text-alpha-high: rgba(224, 224, 224, 0.9);
    --text-alpha-medium: rgba(224, 224, 224, 0.7);
    --text-alpha-low: rgba(224, 224, 224, 0.6);
    --text-alpha-faint: rgba(224, 224, 224, 0.5);
    --text-alpha-muted: rgba(224, 224, 224, 0.4);

    /* Border */
    --border-primary: rgba(255, 255, 255, 0.06);
    --border-secondary: #2a2c30;
    --border-sidebar: #1a1b1e;

    /* Misc */
    --shadow-primary: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.7);
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
    --scrollbar-track: rgba(255, 255, 255, 0.03);

    /* Replied */
    --replied-bg: rgba(50, 53, 60, 0.3);
    --replied-bg-hover: rgba(50, 53, 60, 0.45);

    /* Separator */
    --separator-line: #2a2c30;

    /* Sidebar Specific */
    --bg-elevated: #1e2024;
    --bg-profile: #141517;
    --bg-floating: #0a0a0b;
    --border-floating: #2a2c30;

    /* Modal */
    --modal-bg: rgba(0, 0, 0, 0.85);
    --modal-content-bg: linear-gradient(135deg, rgba(18, 19, 22, 0.99) 0%, rgba(26, 27, 30, 0.97) 100%);

    /* Status Colors - evrensel, temadan bağımsız */
    --status-online: #3ba55d;
    --status-idle: #f0b232;
    --status-dnd: #f23f43;
    --status-offline: #747f8d;
    --status-online-glow: rgba(59, 165, 93, 0.5);

    /* Danger */
    --danger: #ed4245;
    --danger-bg: rgba(237, 66, 69, 0.2);

    /* Badge */
    --badge-bg: #5865f2;
    --badge-text: #ffffff;
}

/* =============================================
   OCEAN THEME (Deep Sea / Mint Accent)
   Based on Seslee logo color #00FF9D
   ============================================= */
html[data-theme="ocean"] {
    /* Primary Backgrounds - Deep ocean blues */
    --bg-primary: #0d1b2a;
    --bg-secondary: #0b1622;
    --bg-tertiary: #071018;
    --bg-chat: rgba(13, 27, 42, 0.4);
    --bg-sidebar: rgba(11, 22, 34, 0.95);
    --bg-input: rgba(16, 36, 56, 0.7);
    --bg-input-focus: rgba(20, 44, 68, 0.85);
    --bg-container: rgba(13, 27, 42, 0.6);
    --bg-hover: rgba(0, 214, 143, 0.04);
    --bg-channel-hover: rgba(0, 214, 143, 0.08);
    --bg-channel-active: rgba(0, 214, 143, 0.14);
    --bg-message-actions: #0b1622;

    /* Accent Colors - Mint green from logo */
    --accent: #00D68F;
    --accent-hover: #00b377;
    --accent-light: rgba(0, 214, 143, 0.08);
    --accent-medium: rgba(0, 214, 143, 0.15);
    --accent-strong: rgba(0, 214, 143, 0.25);
    --accent-border: rgba(0, 214, 143, 0.4);
    --accent-gradient: linear-gradient(45deg, #00D68F, #00b8d4);

    /* Text Colors */
    --text-primary: #e0f0ea;
    --text-secondary: #b0c8be;
    --text-muted: #6d8a80;
    --text-faint: #4a6b60;
    --text-link: #00d4ff;
    --text-placeholder: rgba(224, 240, 234, 0.4);

    /* Text with alpha */
    --text-alpha-high: rgba(224, 240, 234, 0.9);
    --text-alpha-medium: rgba(224, 240, 234, 0.7);
    --text-alpha-low: rgba(224, 240, 234, 0.6);
    --text-alpha-faint: rgba(224, 240, 234, 0.5);
    --text-alpha-muted: rgba(224, 240, 234, 0.4);

    /* Border Colors */
    --border-primary: rgba(0, 214, 143, 0.08);
    --border-secondary: #132d3e;
    --border-sidebar: #0b1622;

    /* Misc */
    --shadow-primary: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.7);
    --scrollbar-thumb: rgba(0, 214, 143, 0.15);
    --scrollbar-thumb-hover: rgba(0, 214, 143, 0.25);
    --scrollbar-track: rgba(0, 214, 143, 0.03);

    /* Replied */
    --replied-bg: rgba(0, 214, 143, 0.06);
    --replied-bg-hover: rgba(0, 214, 143, 0.10);

    /* Separator */
    --separator-line: #132d3e;
    --separator-text: #6d8a80;

    /* Sidebar Specific */
    --bg-elevated: #10253a;
    --bg-profile: #081420;
    --bg-floating: #060e16;
    --border-floating: #1a3550;

    /* Modal */
    --modal-bg: rgba(0, 0, 0, 0.85);
    --modal-content-bg: linear-gradient(135deg, rgba(11, 22, 34, 0.99) 0%, rgba(16, 36, 56, 0.97) 100%);

    /* Status Colors - evrensel, temadan bağımsız */
    --status-online: #3ba55d;
    --status-idle: #f0b232;
    --status-dnd: #f23f43;
    --status-offline: #747f8d;
    --status-online-glow: rgba(59, 165, 93, 0.5);

    /* Danger */
    --danger: #ed4245;
    --danger-bg: rgba(237, 66, 69, 0.2);

    /* Badge */
    --badge-bg: #5865f2;
    --badge-text: #ffffff;
}

/* =============================================
   TWILIGHT THEME (Deep Purple / Lavender Accent)
   Warm violet tones with soft purple glow
   ============================================= */
html[data-theme="twilight"] {
    /* Primary Backgrounds - Deep violet darks */
    --bg-primary: #1a1025;
    --bg-secondary: #150c1f;
    --bg-tertiary: #0e0818;
    --bg-chat: rgba(26, 16, 37, 0.4);
    --bg-sidebar: rgba(21, 12, 31, 0.95);
    --bg-input: rgba(38, 22, 56, 0.7);
    --bg-input-focus: rgba(48, 28, 70, 0.85);
    --bg-container: rgba(26, 16, 37, 0.6);
    --bg-hover: rgba(168, 85, 247, 0.05);
    --bg-channel-hover: rgba(168, 85, 247, 0.10);
    --bg-channel-active: rgba(168, 85, 247, 0.16);
    --bg-message-actions: #150c1f;

    /* Accent Colors - Vibrant purple */
    --accent: #a855f7;
    --accent-hover: #9333ea;
    --accent-light: rgba(168, 85, 247, 0.08);
    --accent-medium: rgba(168, 85, 247, 0.15);
    --accent-strong: rgba(168, 85, 247, 0.25);
    --accent-border: rgba(168, 85, 247, 0.4);
    --accent-gradient: linear-gradient(45deg, #a855f7, #ec4899);

    /* Text Colors */
    --text-primary: #ede4f5;
    --text-secondary: #c4b5d6;
    --text-muted: #8b7a9e;
    --text-faint: #6b5a80;
    --text-link: #c084fc;
    --text-placeholder: rgba(237, 228, 245, 0.4);

    /* Text with alpha */
    --text-alpha-high: rgba(237, 228, 245, 0.9);
    --text-alpha-medium: rgba(237, 228, 245, 0.7);
    --text-alpha-low: rgba(237, 228, 245, 0.6);
    --text-alpha-faint: rgba(237, 228, 245, 0.5);
    --text-alpha-muted: rgba(237, 228, 245, 0.4);

    /* Border Colors */
    --border-primary: rgba(168, 85, 247, 0.10);
    --border-secondary: #2d1a42;
    --border-sidebar: #150c1f;

    /* Misc */
    --shadow-primary: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.7);
    --scrollbar-thumb: rgba(168, 85, 247, 0.18);
    --scrollbar-thumb-hover: rgba(168, 85, 247, 0.28);
    --scrollbar-track: rgba(168, 85, 247, 0.04);

    /* Replied */
    --replied-bg: rgba(168, 85, 247, 0.06);
    --replied-bg-hover: rgba(168, 85, 247, 0.10);

    /* Separator */
    --separator-line: #2d1a42;
    --separator-text: #8b7a9e;

    /* Sidebar Specific */
    --bg-elevated: #221438;
    --bg-profile: #120a1c;
    --bg-floating: #0a0612;
    --border-floating: #3a2055;

    /* Modal */
    --modal-bg: rgba(0, 0, 0, 0.85);
    --modal-content-bg: linear-gradient(135deg, rgba(21, 12, 31, 0.99) 0%, rgba(34, 20, 56, 0.97) 100%);

    /* Status Colors - evrensel, temadan bağımsız */
    --status-online: #3ba55d;
    --status-idle: #f0b232;
    --status-dnd: #f23f43;
    --status-offline: #747f8d;
    --status-online-glow: rgba(59, 165, 93, 0.5);

    /* Danger */
    --danger: #ed4245;
    --danger-bg: rgba(237, 66, 69, 0.2);

    /* Badge */
    --badge-bg: #5865f2;
    --badge-text: #ffffff;
}