/**
 * TG-Catalog v5 Theme Variables
 * Light and Dark theme support via data-theme attribute
 */

:root {
    /* Primary colors */
    --primary: #0088cc;
    --primary-dark: #006699;
    --primary-light: #e0f4ff;
    --primary-rgb: 0, 136, 204;

    /* Badge gradients */
    --vip-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --vip-color: #f59e0b;
    --top-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --top-color: #ef4444;
    --new-bg: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --new-color: #22c55e;
    --hot-bg: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    --hot-color: #f97316;

    /* Type colors */
    --channel-color: #0088cc;
    --bot-color: #8b5cf6;
    --chat-color: #22c55e;

    /* Light theme (default) */
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --text: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --shadow: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.08);
    --star-filled: #fbbf24;
    --star-empty: #d1d5db;
    --fade-color: rgba(241, 245, 249, 0);
    --fade-solid: rgba(241, 245, 249, 1);

    /* Input colors */
    --input-bg: rgba(255,255,255,0.2);
    --input-bg-focus: rgba(255,255,255,0.3);
    --input-placeholder: rgba(255,255,255,0.7);

    /* Misc */
    --header-gradient-start: rgba(0,102,153,0);
    --header-gradient-end: rgba(0,102,153,0.9);
}

[data-theme="dark"] {
    --bg: #17212b;
    --card-bg: #232e3c;
    --text: #f5f5f5;
    --text-secondary: #b0b0b0;
    --text-muted: #6b7d8a;
    --border: #344152;
    --shadow: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.25);
    --star-empty: #4a5568;
    --primary-light: #1c3a52;
    --fade-color: rgba(23, 33, 43, 0);
    --fade-solid: rgba(23, 33, 43, 1);
}