/* CSS Variables for theming - matching TECHNICAL_SPEC.md */

:root {
    /* Light theme (default) */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F7F7F8;
    --bg-card: #FFFFFF;

    --text-primary: #1A1A1A;
    --text-secondary: #6B6B6B;
    --text-muted: #9CA3AF;

    --accent-primary: #6366F1;      /* Indigo - main */
    --accent-success: #10B981;      /* Green - victory */
    --accent-warning: #F59E0B;      /* Yellow - highlight */
    --accent-danger: #EF4444;       /* Red - errors */

    --border-color: #E5E7EB;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Participant gradient colors */
    --finger-1-start: #FF6B6B;
    --finger-1-end: #EE5A5A;
    --finger-1-rgb: 255, 107, 107;

    --finger-2-start: #4ECDC4;
    --finger-2-end: #3DBDB5;
    --finger-2-rgb: 78, 205, 196;

    --finger-3-start: #FFE66D;
    --finger-3-end: #FFD93D;
    --finger-3-rgb: 255, 230, 109;

    --finger-4-start: #6366F1;
    --finger-4-end: #4F46E5;
    --finger-4-rgb: 99, 102, 241;

    --finger-5-start: #F472B6;
    --finger-5-end: #EC4899;
    --finger-5-rgb: 244, 114, 182;

    --finger-6-start: #34D399;
    --finger-6-end: #10B981;
    --finger-6-rgb: 52, 211, 153;

    --finger-7-start: #FB923C;
    --finger-7-end: #F97316;
    --finger-7-rgb: 251, 146, 60;

    --finger-8-start: #A78BFA;
    --finger-8-end: #8B5CF6;
    --finger-8-rgb: 167, 139, 250;

    --finger-9-start: #38BDF8;
    --finger-9-end: #0EA5E9;
    --finger-9-rgb: 56, 189, 248;

    --finger-10-start: #FACC15;
    --finger-10-end: #EAB308;
    --finger-10-rgb: 250, 204, 21;

    /* Extended colors 11-20 for large groups */
    --finger-11-start: #EF4444;
    --finger-11-end: #DC2626;
    --finger-11-rgb: 239, 68, 68;

    --finger-12-start: #06B6D4;
    --finger-12-end: #0891B2;
    --finger-12-rgb: 6, 182, 212;

    --finger-13-start: #84CC16;
    --finger-13-end: #65A30D;
    --finger-13-rgb: 132, 204, 22;

    --finger-14-start: #8B5CF6;
    --finger-14-end: #7C3AED;
    --finger-14-rgb: 139, 92, 246;

    --finger-15-start: #F43F5E;
    --finger-15-end: #E11D48;
    --finger-15-rgb: 244, 63, 94;

    --finger-16-start: #14B8A6;
    --finger-16-end: #0D9488;
    --finger-16-rgb: 20, 184, 166;

    --finger-17-start: #F59E0B;
    --finger-17-end: #D97706;
    --finger-17-rgb: 245, 158, 11;

    --finger-18-start: #EC4899;
    --finger-18-end: #DB2777;
    --finger-18-rgb: 236, 72, 153;

    --finger-19-start: #3B82F6;
    --finger-19-end: #2563EB;
    --finger-19-rgb: 59, 130, 246;

    --finger-20-start: #22C55E;
    --finger-20-end: #16A34A;
    --finger-20-rgb: 34, 197, 94;

    /* Sizes */
    --finger-size: 64px;
    --countdown-size: 120px;

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-normal: 300ms ease-out;
    --transition-slow: 500ms ease-out;
}

/* Dark theme - syncs with Telegram */
[data-theme="dark"] {
    --bg-primary: #1A1A1A;
    --bg-secondary: #252525;
    --bg-card: #2D2D2D;

    --text-primary: #FFFFFF;
    --text-secondary: #A1A1A1;
    --text-muted: #6B6B6B;

    --accent-primary: #818CF8;      /* Lighter for contrast */
    --accent-success: #34D399;
    --accent-warning: #FBBF24;
    --accent-danger: #F87171;

    --border-color: #404040;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Telegram theme integration */
body {
    --tg-theme-bg-color: var(--bg-primary);
    --tg-theme-text-color: var(--text-primary);
    --tg-theme-hint-color: var(--text-secondary);
    --tg-theme-link-color: var(--accent-primary);
    --tg-theme-button-color: var(--accent-primary);
    --tg-theme-button-text-color: #FFFFFF;
    --tg-theme-secondary-bg-color: var(--bg-secondary);
}