/**
 * Theme styles for light/dark mode
 * Dark mode is triggered by the 'dark' class on the <html> element
 * Brand palette: Custom Gold gradient primary, Black secondary, Red accent
 */


/* Base theme variables - Light Mode */
:root {
    /* Custom gold gradient colors */
    --color-gold: #ffd700;
    --color-gold-start: #d19e1d;
    --color-gold-middle: #ffd86e;
    --color-gold-end: #e3a812;
    --color-gold-gradient: linear-gradient(180deg, var(--color-gold-start) 0%, var(--color-gold-middle) 50%, var(--color-gold-end) 100%);
    
    /* Brand colors */
    --color-primary: var(--color-gold-middle); /* Solid fallback */
    --color-primary-gradient: var(--color-gold-gradient); /* Gradient for backgrounds */
    --color-primary-hover: var(--color-gold-end);
    --color-primary-light: var(--color-gold-middle);
    --color-secondary: #1f2937; /* gray-800 - black */
    --color-secondary-hover: #111827; /* gray-900 */
    --color-accent: #dc2626; /* red-600 */
    --color-accent-hover: #b91c1c; /* red-700 */
    
    /* Semantic colors */
    --color-background: #ffffff;
    --color-background-image: none;
    --color-surface: #f9fafb;
    --color-surface-secondary: #f3f4f6;
    --color-text: #111827;
    --color-text-secondary: #6b7280;
    --color-text-muted: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    
    /* Interactive states */
    --color-link: var(--color-gold-start);
    --color-link-hover: var(--color-gold-end);
    --color-focus-ring: var(--color-gold-middle);
}

/* Dark theme overrides */
.dark {
    /* Brand colors adjusted for dark mode - using same gold gradient */
    --color-primary: var(--color-gold-middle); /* Solid fallback */
    --color-primary-gradient: var(--color-gold-gradient); /* Same gradient for consistency */
    --color-primary-hover: var(--color-gold-start);
    --color-primary-light: var(--color-gold-middle);
    --color-secondary: #f9fafb; /* light text on dark */
    --color-secondary-hover: #ffffff;
    --color-accent: #f87171; /* red-400 - softer for dark */
    --color-accent-hover: #fca5a5; /* red-300 */
    
    /* Semantic colors */
    --color-background: #111827; /* gray-900 */
    --color-background-image: none;
    --color-surface: #1f2937; /* gray-800 */
    --color-surface-secondary: #374151; /* gray-700 */
    --color-text: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-muted: #9ca3af;
    --color-border: #374151;
    --color-border-strong: #4b5563;
    
    /* Interactive states */
    --color-link: var(--color-gold-middle);
    --color-link-hover: var(--color-gold-start);
    --color-focus-ring: var(--color-gold-middle);
}

/* Apply theme colors to body */
body {
    background-color: var(--color-background);
    background-image: var(--color-background-image);
    color: var(--color-text);
}

/* Smooth transitions for theme changes */
body,
.card,
.form-input,
nav,
aside,
footer {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Focus states with theme awareness */
*:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Custom scrollbar for both themes */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}