/**
 * BruteForce AI - Color System
 * Based on "Warm Professional" palette from UI/UX audit
 * Last Updated: January 2026
 *
 * Design System:
 * - Primary (Indigo): Main brand color, primary actions
 * - Accent (Coral): Secondary actions, highlights
 * - Neutral (Warm Gray/Cream): Backgrounds, text
 * - Success (Teal): Positive feedback, success states
 *
 * NOTE: Semantic tokens are now defined in tokens.css
 * This file provides backward compatibility mappings
 *
 * Component styles extracted to:
 * - components/ad-card.css
 * - components/sidebar.css
 * - components/date-picker.css
 * - components/modals.css
 * - components/navigation.css
 */

:root {
    /* Primary Colors - Indigo
     * These map to semantic tokens for backward compatibility */
    --color-primary-50: #EEF2FF;
    --color-primary-100: #E0E7FF;
    --color-primary-500: #6366F1;    /* Indigo - Main brand */
    --color-primary-600: #4F46E5;    /* Deep indigo - Primary actions */
    --color-primary-700: #4338CA;
    --color-primary-800: #3730A3;

    /* Accent Colors - Coral */
    --color-accent-50: #FFF1F2;
    --color-accent-100: #FFE4E6;
    --color-accent-500: #FF6B6B;     /* Coral - Secondary actions */
    --color-accent-600: #FF5252;
    --color-accent-700: #E64545;

    /* Neutral Colors - Warm Gray/Cream (Stone scale) */
    --color-neutral-50: #FAFAF9;     /* Cream background - stone-50 */
    --color-neutral-100: #F5F5F4;    /* stone-100 */
    --color-neutral-200: #E7E5E4;    /* stone-200 */
    --color-neutral-300: #D6D3D1;    /* stone-300 */
    --color-neutral-400: #A8A29E;    /* stone-400 */
    --color-neutral-500: #78716C;    /* stone-500 */
    --color-neutral-600: #57534E;    /* stone-600 */
    --color-neutral-700: #44403C;    /* stone-700 */
    --color-neutral-900: #1C1917;    /* stone-900 */

    /* Success/Teal */
    --color-success-50: #F0FDFA;
    --color-success-500: #14B8A6;
    --color-success-600: #0D9488;
}

/*
 * Override Tailwind Blue Classes
 * Maps existing bg-blue-*, text-blue-*, border-blue-* to semantic colors
 * This allows existing code to automatically use the new color palette
 */

/* PRIMARY ACTIONS - Buttons, Interactive Elements */
.bg-blue-600 {
    background-color: var(--accent-primary) !important;
}

.bg-blue-700,
.hover\:bg-blue-700:hover {
    background-color: var(--accent-primary-hover) !important;
}

.bg-blue-800,
.hover\:bg-blue-800:hover {
    background-color: var(--accent-primary-active) !important;
}

/* TEXT COLORS */
.text-blue-600 {
    color: var(--accent-primary) !important;
}

.text-blue-700 {
    color: var(--accent-primary-hover) !important;
}

/* BORDER COLORS */
.border-blue-500,
.hover\:border-blue-500:hover {
    border-color: var(--border-focus) !important;
}

.border-blue-600 {
    border-color: var(--accent-primary) !important;
}

/* LIGHT BACKGROUNDS - Hover states, subtle highlights */
.bg-blue-50,
.hover\:bg-blue-50:hover {
    background-color: var(--accent-primary-light) !important;
}

.bg-blue-100 {
    background-color: var(--color-primary-100) !important;
}

/* FOCUS RINGS - Form inputs, keyboard navigation */
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--border-focus) !important;
}

.focus\:border-blue-500:focus {
    border-color: var(--border-focus) !important;
}

/* SPINNER - Loading indicators */
.spinner {
    border-left-color: var(--accent-primary) !important;
}

/*
 * Legacy Utility Classes
 * NOTE: Prefer using utilities.css classes for new code
 * These are kept for backward compatibility
 */

/* Backgrounds */
.bg-primary {
    background-color: var(--accent-primary);
}

.bg-primary-light {
    background-color: var(--accent-primary-light);
}

.bg-accent {
    background-color: var(--accent-secondary);
}

.bg-accent-light {
    background-color: var(--accent-secondary-light);
}

.bg-surface {
    background-color: var(--surface-default);
}

.bg-success {
    background-color: var(--status-success);
}

/* Text Colors */
.text-primary {
    color: var(--accent-primary);
}

.text-accent {
    color: var(--accent-secondary);
}

.text-body {
    color: var(--text-default);
}

.text-success {
    color: var(--status-success);
}

/* Borders */
.border-primary {
    border-color: var(--accent-primary);
}

.border-accent {
    border-color: var(--accent-secondary);
}

.border-neutral {
    border-color: var(--border-default);
}

/* Focus States */
.focus-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-focus);
    border-color: var(--border-focus);
}

/* Muted button - for secondary actions like New Report */
.btn-muted {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-default);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.btn-muted:hover {
    background-color: var(--surface-hover);
    border-color: var(--border-strong);
}

/* Outline button - for tertiary actions */
.btn-outline {
    background-color: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.btn-outline:hover {
    background-color: var(--accent-primary-light);
}

/* Select All button - Reduced visual weight */
.select-all-btn {
    color: var(--text-muted);
    font-weight: var(--font-medium);
    font-size: 13px;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    cursor: pointer;
}

.select-all-btn:hover {
    color: var(--accent-primary-hover);
    text-decoration: underline;
}

/* View toggle buttons (Cards/Table) - with icons */
.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Upload modal card selection states */
.border-primary-600 {
    border-color: var(--accent-primary) !important;
}

.bg-primary-50 {
    background-color: var(--accent-primary-light) !important;
}

.hover\:border-primary-600:hover {
    border-color: var(--accent-primary) !important;
}

/* Stone Color Utilities (Tailwind stone scale)
 * These map stone-* classes to semantic tokens */
.text-stone-50 { color: var(--color-neutral-50); }
.text-stone-100 { color: var(--color-neutral-100); }
.text-stone-200 { color: var(--color-neutral-200); }
.text-stone-300 { color: var(--color-neutral-300); }
.text-stone-400 { color: var(--text-disabled); }
.text-stone-500 { color: var(--text-subtle); }
.text-stone-600 { color: var(--text-muted); }
.text-stone-700 { color: var(--text-default); }
.text-stone-900 { color: var(--text-default); }

.bg-stone-50 { background-color: var(--surface-default); }
.bg-stone-100 { background-color: var(--surface-hover); }
.bg-stone-200 { background-color: var(--surface-active); }

.border-stone-200 { border-color: var(--border-default); }
.border-stone-300 { border-color: var(--border-strong); }

.hover\:bg-stone-200:hover { background-color: var(--surface-active); }
.hover\:text-stone-700:hover { color: var(--text-default); }
.hover\:text-stone-600:hover { color: var(--text-muted); }
.hover\:border-indigo-400:hover { border-color: var(--color-primary-400); }
.hover\:bg-indigo-50:hover { background-color: var(--accent-primary-light); }

/* Indigo utility classes */
.text-indigo-700 { color: var(--accent-primary-hover); }
.bg-indigo-700 { background-color: var(--accent-primary-hover); }
.group-hover\:bg-indigo-700:hover { background-color: var(--accent-primary-hover); }
.group-hover\:text-white:hover { color: var(--text-inverse); }