/* Color Variables Only
 * Brand colors, state colors, neutrals, and semantic color tokens
 * Non-color variables (layout, radii, shadows) are in variables_non_colors.css
 */

:root {
    /* Brand Colors - Purple gradients */
    --brand-1: #667eea;
    --brand-2: #764ba2;
    --brand-rgb: 102, 126, 234;
    --brand-2-rgb: 118, 75, 162;

    /* States */
    --blue: #007bff;
    --blue-dark: #0056b3;
    --blue-rgb: 0, 123, 255;

    --success: #28a745;
    --success-aux: #20c997;
    --success-dark: #1e7e34;
    --success-darker: #155724;
    --success-rgb: 40, 167, 69;
    --success-text: #155724;

    --danger: #dc3545;
    --danger-rgb: 220, 53, 69;
    --danger-dark: #c82333;
    --danger-text: #721c24;

    --info: #17a2b8;
    --info-text: #0c5460;
    --info-dark: #117a8b;

    --warning: #ffc107;
    --warning-rgb: 255, 193, 7;
    --warning-text: #856404;
    --warning-dark: #e67e22;

    --orange: #fd7e14;
    --orange-rgb: 253, 126, 20;

    /* Neutrals */
    --white: #ffffff;
    --white-rgb: 255, 255, 255;
    --black: #000000;
    --black-rgb: 0, 0, 0;

    --gray-100: #f8f9fa;
    --gray-100-rgb: 248, 249, 250;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-600-rgb: 108, 117, 125;
    --gray-700: #495057;
    --gray-800: #333333;
    --gray-900: #111111;

    /* Additional text tones */
    --ink-strong: #2c3e50;
    --text-500: #555555;

    /* Accents */
    --accent-completed: #3128a7;

    /* Legacy compatibility - Light theme */
    --color-primary: var(--blue);
    --color-primary-light: #80bdff;
    --color-primary-dark: var(--blue-dark);
    --color-secondary: var(--gray-600);
    --color-secondary-light: #a1a9b0;
    --color-secondary-dark: var(--gray-700);
    --color-success: var(--success);
    --color-success-light: #48c76a;
    --color-success-dark: var(--success-dark);
    --color-danger: var(--danger);
    --color-danger-light: #e25563;
    --color-danger-dark: var(--danger-dark);
    --color-warning: var(--warning);
    --color-warning-light: #ffca2c;
    --color-warning-dark: var(--warning-dark);
    --color-info: var(--info);
    --color-info-light: #31d2f2;
    --color-info-dark: var(--info-dark);
    --color-light: var(--gray-100);
    --color-light-dark: var(--gray-200);
    --color-lighter: #f1f1f1;
    --color-dark: var(--gray-800);
    --color-dark-light: var(--gray-700);
    --color-text: var(--gray-800);
    --color-text-secondary: var(--gray-600);
    --color-background: var(--white);
    --color-coach-message: #007AFF;
    --color-user-message: #34C759;
    --color-muted: #CCCCCC;
    --color-border: #e1e1e1;
    --border-color: var(--color-border);
    --in-progress-bg-color: rgba(var(--warning-rgb), 0.1);
    --completed-bg-color: rgba(var(--success-rgb), 0.1);
    --color-background-muted: rgba(0, 0, 0, 0.05);
    --color-background-muted-dark: rgba(255, 255, 255, 0.1);

    /* Use consistent --color-* naming */
    --color-surface: var(--white);
    --color-surface-secondary: var(--gray-100);
    --color-surface-tertiary: var(--gray-200);

    /* Utility color mappings */
    --text-muted: var(--color-text-secondary);
    --bg-secondary: var(--color-surface-secondary);

    /* Chat message colors */
    --chat-coach-color: var(--blue);
    --chat-coach-color-dark: var(--blue-dark);
    --chat-coach-gradient: linear-gradient(135deg, var(--chat-coach-color), var(--chat-coach-color-dark));
    --chat-user-color: var(--brand-1);
    --chat-user-color-dark: var(--brand-2);
    --chat-user-gradient: linear-gradient(135deg, var(--chat-user-color), var(--chat-user-color-dark));

    /* Brand Gradients */
    --grad-brand: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    --grad-brand-90: linear-gradient(90deg, var(--brand-1), var(--brand-2));
    --grad-brand-rev: linear-gradient(135deg, var(--brand-2), var(--brand-1));

    /* State gradients */
    --color-success-gradient: linear-gradient(135deg, var(--success), var(--success-aux));
    --color-success-gradient-hover: linear-gradient(135deg, var(--success-aux), var(--success));
    --color-danger-gradient: linear-gradient(135deg, var(--danger), var(--danger-dark));
    --color-danger-gradient-hover: linear-gradient(135deg, var(--danger-dark), var(--danger));
    --color-warning-gradient: linear-gradient(135deg, var(--warning), var(--warning-dark));
    --color-warning-gradient-hover: linear-gradient(135deg, var(--warning-dark), var(--warning));
    --color-info-gradient: linear-gradient(135deg, var(--info), var(--blue));
    --color-info-gradient-hover: linear-gradient(135deg, var(--blue), var(--info));

    /* Session tile gradients */
    --gradient-1: linear-gradient(135deg, #d84f76, #e0b820);
    --gradient-2: linear-gradient(135deg, #2d8bd9, #00b8d4);
    --gradient-3: linear-gradient(135deg, #f093fb, #f5576c);
    --gradient-4: linear-gradient(135deg, #7C5FFF, #B855FF);
    --gradient-5: linear-gradient(135deg, #75c7c4, #d9a4b9);
    --gradient-6: linear-gradient(135deg, #d66fe0, #d43d52);
    --gradient-7: linear-gradient(135deg, #4facfe, #00f2fe);
    --gradient-8: linear-gradient(135deg, #e0bc92, #d88b6f);
    --gradient-9: linear-gradient(135deg, #1fa5a6, #1f0540);
    --gradient-10: linear-gradient(135deg, #2bc261, #1ec7a7);
    --gradient-11: linear-gradient(135deg, #d96d72, #d89fc5);
    --gradient-12: linear-gradient(135deg, #667eea, #764ba2);
    --gradient-13: linear-gradient(135deg, #fa709a, #fee140);
    --gradient-14: linear-gradient(135deg, #30cfd0, #330867);
    --gradient-15: linear-gradient(135deg, #FF7C3C, #FF3C7C);
    --gradient-16: linear-gradient(135deg, #a8edea, #fed6e3);
    --gradient-17: linear-gradient(135deg, #2e2e78, #662d91);
    --gradient-18: linear-gradient(135deg, #11998e, #38ef7d);

    /* Utility */
    --text-gradient: var(--grad-brand);
    --body-background: var(--grad-brand);

    /* Effects that use colors */
    --surface: rgba(var(--white-rgb), 0.95);
    --glass-border: rgba(var(--white-rgb), 0.2);
    --brand-border: rgba(var(--brand-rgb), 0.2);
    --brand-border-strong: rgba(var(--brand-rgb), 0.3);
}


/* Dark Theme Override - Colors Only */
.theme-dark {
    /* Brand Colors - Purple gradients preserved */
    --brand-1: #667eea;
    --brand-2: #764ba2;
    --brand-rgb: 102, 126, 234;
    --brand-2-rgb: 118, 75, 162;

    /* States - Dark variants */
    --blue: #4dabff;
    --blue-dark: #1a91ff;
    --blue-rgb: 77, 171, 255;

    --success: #2ecc71;
    --success-aux: #27ae60;
    --success-dark: #25a25a;
    --success-rgb: 46, 204, 113;
    --success-text: #a3e6c1;

    --danger: #e74c3c;
    --danger-dark: #c0392b;
    --danger-text: #f1948a;

    --info: #3498db;
    --info-text: #85c1e9;
    --info-dark: #2980b9;

    --warning: #f39c12;
    --warning-text: #f8c471;
    --warning-dark: #d68910;

    --orange: #ff8c42;
    --orange-rgb: 255, 140, 66;

    /* Neutrals - Inverted for dark theme */
    --gray-100: #2c2c2c;
    --gray-100-rgb: 44, 44, 44;
    --gray-200: #3a3a3a;
    --gray-300: #4a4a4a;
    --gray-400: #5a5a5a;
    --gray-500: #6a6a6a;
    --gray-600: #8a8a8a;
    --gray-600-rgb: 138, 138, 138;
    --gray-700: #ced4da;
    --gray-800: #e9ecef;
    --gray-900: #f8f9fa;

    /* Additional text tones - Dark variants */
    --ink-strong: #f8f9fa;
    --text-500: #adb5bd;

    /* Accents - Keep purple */
    --accent-completed: #667eea;

    /* Legacy compatibility - Dark variants */
    --color-primary: var(--blue);
    --color-primary-light: #80bdff;
    --color-primary-dark: var(--blue-dark);
    --color-secondary: var(--gray-600);
    --color-secondary-light: var(--gray-700);
    --color-success: var(--success);
    --color-success-light: #55d98d;
    --color-success-dark: var(--success-dark);
    --color-danger: var(--danger);
    --color-danger-light: #ed7669;
    --color-danger-dark: var(--danger-dark);
    --color-warning: var(--warning);
    --color-warning-light: #f7bc5d;
    --color-warning-dark: var(--warning-dark);
    --color-info: var(--info);
    --color-info-light: #75b9e7;
    --color-info-dark: var(--info-dark);
    --color-light: var(--gray-100);
    --color-light-dark: var(--gray-200);
    --color-lighter: var(--gray-300);
    --color-dark: var(--gray-800);
    --color-dark-light: var(--gray-700);
    --color-text: var(--gray-900);
    --color-text-secondary: var(--gray-700);
    --color-background: #1a1a1a;
    --color-coach-message: var(--success);
    --color-user-message: var(--info);
    --color-muted: #6c757d;
    --color-border: var(--gray-300);
    --border-color: var(--color-border);
    --in-progress-bg-color: rgba(var(--warning-rgb), 0.15);
    --completed-bg-color: rgba(var(--success-rgb), 0.15);
    --color-background-muted: rgba(255, 255, 255, 0.05);
    --color-background-muted-dark: rgba(0, 0, 0, 0.2);

    /* Dark theme color overrides - black backgrounds */
    --color-surface: #1a1a1a;
    --color-surface-secondary: var(--gray-100);
    --color-surface-tertiary: var(--gray-200);

    /* Utility - Dark variants */
    --text-muted: var(--color-text-secondary);
    --bg-secondary: var(--color-surface-secondary);

    /* Chat message colors - Dark theme */
    --chat-coach-color: var(--blue);
    --chat-coach-color-dark: var(--blue-dark);
    --chat-coach-gradient: linear-gradient(135deg, var(--chat-coach-color), var(--chat-coach-color-dark));
    --chat-user-color: var(--brand-1);
    --chat-user-color-dark: var(--brand-2);
    --chat-user-gradient: linear-gradient(135deg, var(--chat-user-color), var(--chat-user-color-dark));

    /* Dark theme gradients */
    --grad-brand: linear-gradient(135deg, #a49cef, #a49cef);
    --grad-brand-90: linear-gradient(90deg, #a49cef, #a49cef);
    --grad-brand-rev: linear-gradient(135deg, #a49cef, #a49cef);
    --body-background: #0f0f0f;

    /* Effects - Dark variants */
    --surface: rgba(26, 26, 26, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);
    --brand-border: rgba(var(--brand-rgb), 0.3);
    --brand-border-strong: rgba(var(--brand-rgb), 0.4);
}