/* Carbon Dark Theme - Custom Utilities */

:root {
    /* Palette Variables matching index.html usage */
    --primary: #3B82F6;       /* Blue */
    --secondary: #1E293B;     /* Dark Slate */
    --accent: #22D3EE;        /* Cyan */
    --background: #0F172A;    /* Dark Blue/Slate */
    --text: #F1F5F9;          /* Light Slate */
    --surface: #1E293B;       /* Dark Slate */
    --surface-alt: #334155;   /* Lighter Slate for hover/active */
    
    /* Alias for compatibility if needed */
    --primary-dark: #2563EB;
    --secondary-dark: #0F172A;
}

/* Base Typography - Fonts loaded via local.css in HTML */
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background);
    color: var(--text);
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Inter', sans-serif;
}

/* Custom Color Utilities */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-background { background-color: var(--background); }
.bg-surface { background-color: var(--surface); }
.bg-surface-alt { background-color: var(--surface-alt); }

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

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

/* Component Overrides */
.btn-primary {
    background-color: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: background-color 0.2s;
}
.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-accent {
    background-color: var(--accent);
    color: #0F172A; /* Dark text for contrast */
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: background-color 0.2s;
}
.btn-accent:hover {
    background-color: #06B6D4; /* Slightly darker cyan */
}

/* Accordion */
.accordion-content {
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}
.accordion-content.active {
    max-height: 500px; /* Arbitrary large height */
}