/* Syeni Leonardo Brand Colors - Clean White Theme */
:root {
    /* Brand Colors - Clean White Aesthetic */
    --brand-dark: #1f2937;      /* Dark gray for primary actions */
    --brand-light: #6b7280;     /* Medium gray for secondary */
    --brand-accent: #e5e7eb;    /* Light gray accent */
    --brand-text: #111827;      /* Dark text */
    --brand-white: #ffffff;     /* Pure white background */
    --brand-surface: #f9fafb;   /* Very light gray surface */
    --brand-border: #d1d5db;    /* Light gray border */
    
    /* Status Colors - Modern and Clean */
    --success: #10b981;         /* Emerald green */
    --warning: #f59e0b;         /* Amber */
    --danger: #ef4444;          /* Red */
    --info: #3b82f6;            /* Blue */
}

/* Custom Tailwind Brand Colors */
.bg-brand-dark { background-color: var(--brand-dark); }
.bg-brand-light { background-color: var(--brand-light); }
.bg-brand-accent { background-color: var(--brand-accent); }
.bg-brand-white { background-color: var(--brand-white); }
.bg-brand-surface { background-color: var(--brand-surface); }

.text-brand-dark { color: var(--brand-dark); }
.text-brand-light { color: var(--brand-light); }
.text-brand-accent { color: var(--brand-accent); }
.text-brand-text { color: var(--brand-text); }

.border-brand-dark { border-color: var(--brand-dark); }
.border-brand-light { border-color: var(--brand-light); }
.border-brand-accent { border-color: var(--brand-accent); }
.border-brand-border { border-color: var(--brand-border); }

/* Hover Effects */
.hover-brand-dark:hover { background-color: var(--brand-dark); }
.hover-brand-light:hover { background-color: var(--brand-light); }

/* Focus Effects */
.focus-brand-dark:focus { 
    --tw-ring-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* Status Colors */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }

.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-danger { background-color: var(--danger); }
.bg-info { background-color: var(--info); }

/* Custom Components */
.brand-card {
    background-color: var(--brand-white);
    border: 2px solid var(--brand-accent);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.brand-input {
    background-color: var(--brand-white);
    border: 2px solid var(--brand-accent);
    color: var(--brand-text);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}

.brand-input:focus {
    outline: none;
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
}

.brand-button {
    background-color: var(--brand-dark);
    color: var(--brand-white);
    border: 2px solid var(--brand-dark);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

.brand-button:hover {
    background-color: rgba(31, 41, 55, 0.9);
}

.brand-button-secondary {
    background-color: var(--brand-light);
    color: var(--brand-text);
    border: 2px solid var(--brand-accent);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

.brand-button-secondary:hover {
    background-color: var(--brand-accent);
}