/* 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 - vibrant neon palette */
    --finger-1-start: #FF3D71;
    --finger-1-end: #FF0A54;
    --finger-1-rgb: 255, 61, 113;

    --finger-2-start: #00F5D4;
    --finger-2-end: #00BBF9;
    --finger-2-rgb: 0, 245, 212;

    --finger-3-start: #FEE440;
    --finger-3-end: #F9C80E;
    --finger-3-rgb: 254, 228, 64;

    --finger-4-start: #7B61FF;
    --finger-4-end: #5E17EB;
    --finger-4-rgb: 123, 97, 255;

    --finger-5-start: #FF6AC1;
    --finger-5-end: #FF2E93;
    --finger-5-rgb: 255, 106, 193;

    --finger-6-start: #00FF87;
    --finger-6-end: #00D26A;
    --finger-6-rgb: 0, 255, 135;

    --finger-7-start: #FF9500;
    --finger-7-end: #FF6A00;
    --finger-7-rgb: 255, 149, 0;

    --finger-8-start: #BF5AF2;
    --finger-8-end: #9D4EDD;
    --finger-8-rgb: 191, 90, 242;

    --finger-9-start: #00D4FF;
    --finger-9-end: #0096FF;
    --finger-9-rgb: 0, 212, 255;

    --finger-10-start: #FFEA00;
    --finger-10-end: #FFD000;
    --finger-10-rgb: 255, 234, 0;

    /* Extended colors 11-20 for large groups - vibrant neon */
    --finger-11-start: #FF4757;
    --finger-11-end: #FF1744;
    --finger-11-rgb: 255, 71, 87;

    --finger-12-start: #18FFFF;
    --finger-12-end: #00E5FF;
    --finger-12-rgb: 24, 255, 255;

    --finger-13-start: #76FF03;
    --finger-13-end: #64DD17;
    --finger-13-rgb: 118, 255, 3;

    --finger-14-start: #D500F9;
    --finger-14-end: #AA00FF;
    --finger-14-rgb: 213, 0, 249;

    --finger-15-start: #FF4081;
    --finger-15-end: #F50057;
    --finger-15-rgb: 255, 64, 129;

    --finger-16-start: #1DE9B6;
    --finger-16-end: #00BFA5;
    --finger-16-rgb: 29, 233, 182;

    --finger-17-start: #FFAB00;
    --finger-17-end: #FF8F00;
    --finger-17-rgb: 255, 171, 0;

    --finger-18-start: #E040FB;
    --finger-18-end: #D500F9;
    --finger-18-rgb: 224, 64, 251;

    --finger-19-start: #448AFF;
    --finger-19-end: #2979FF;
    --finger-19-rgb: 68, 138, 255;

    --finger-20-start: #00E676;
    --finger-20-end: #00C853;
    --finger-20-rgb: 0, 230, 118;

    /* 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);
}