/* track360 Brand Theme */

:root {
    /* Brand Colors */
    --track360-charcoal: #2B2D2F;
    --track360-neon-mint: #98FFD9;
    --track360-white: #FFFFFF;
    
    /* Derived Colors */
    --track360-charcoal-light: #4A4D4F;
    --track360-charcoal-dark: #1A1C1E;
    --track360-mint-glow: rgba(152, 255, 217, 0.3);
    --track360-mint-glow-strong: rgba(152, 255, 217, 0.5);
    --track360-mint-light: #B8FFE9;
    --track360-mint-dark: #78DFB9;
}

/* Typography - Michroma like the logo */
body {
    font-family: 'Michroma', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--track360-charcoal);
    font-weight: 500;
}

/* Headings - Michroma matching logo */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Michroma', sans-serif !important;
    color: var(--track360-charcoal) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em;
}

/* Hero headings with gradient effect */
h1 {
    font-size: 3.5rem;
    line-height: 1.1;
}

h2 {
    font-size: 2.5rem;
    line-height: 1.2;
}

/* Primary Buttons - Charcoal with neon mint glow on hover */
.btn-primary,
.bg-black,
button[type="submit"],
input[type="submit"],
a.bg-black,
a.bg-white.text-black {
    background-color: var(--track360-charcoal) !important;
    color: var(--track360-white) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    border: 2px solid var(--track360-charcoal) !important;
    border-radius: 8px !important;
    padding: 12px 32px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-primary:hover,
.bg-black:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
a.bg-black:hover,
a.bg-white.text-black:hover {
    background-color: var(--track360-charcoal-dark) !important;
    border-color: var(--track360-neon-mint) !important;
    box-shadow: 0 0 25px var(--track360-mint-glow-strong), 0 0 50px var(--track360-mint-glow) !important;
    transform: translateY(-2px);
}

/* Secondary Buttons - Neon Mint */
.btn-secondary,
a.bg-white {
    background-color: var(--track360-white) !important;
    color: var(--track360-charcoal) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    border: 2px solid var(--track360-neon-mint) !important;
    border-radius: 8px !important;
    padding: 12px 32px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-secondary:hover,
a.bg-white:hover {
    background-color: var(--track360-neon-mint) !important;
    color: var(--track360-charcoal) !important;
    box-shadow: 0 0 25px var(--track360-mint-glow-strong) !important;
    transform: translateY(-2px);
}

/* Accent Elements */
.text-accent,
.hover\:text-accent:hover {
    color: var(--track360-neon-mint) !important;
}

.bg-accent {
    background-color: var(--track360-neon-mint) !important;
    color: var(--track360-charcoal);
}

/* Links */
a {
    color: var(--track360-charcoal);
}

a:hover {
    color: var(--track360-neon-mint);
}

/* Navigation hover states */
nav a:hover {
    color: var(--track360-neon-mint) !important;
    text-shadow: 0 0 10px var(--track360-mint-glow);
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--track360-neon-mint) !important;
    box-shadow: 0 0 0 3px var(--track360-mint-glow) !important;
    outline: none;
}

/* Glow effect for special elements */
.glow-mint {
    box-shadow: 0 0 20px var(--track360-mint-glow);
}

.glow-mint-strong {
    box-shadow: 0 0 30px rgba(152, 255, 217, 0.5);
}

/* Header/Footer */
header {
    background-color: var(--track360-white);
    border-bottom: 2px solid var(--track360-neon-mint);
}

footer {
    background-color: var(--track360-charcoal);
    color: var(--track360-white);
}

footer a {
    color: var(--track360-mint-light);
}

footer a:hover {
    color: var(--track360-neon-mint);
    text-shadow: 0 0 10px var(--track360-mint-glow);
}

/* Cards and Panels */
.card,
.panel {
    border: 1px solid rgba(152, 255, 217, 0.2);
}

.card:hover,
.panel:hover {
    border-color: var(--track360-neon-mint);
    box-shadow: 0 4px 20px var(--track360-mint-glow);
}

/* Admin Panel Accent */
.admin-sidebar a.active,
.admin-sidebar a:hover {
    background-color: var(--track360-neon-mint) !important;
    color: var(--track360-charcoal) !important;
}

/* Success/Info Messages */
.alert-success,
.success-message {
    background-color: var(--track360-mint-light);
    color: var(--track360-charcoal);
    border-left: 4px solid var(--track360-neon-mint);
}

/* Badges */
.badge-primary {
    background-color: var(--track360-neon-mint);
    color: var(--track360-charcoal);
}

/* Loading/Spinner */
.spinner {
    border-top-color: var(--track360-neon-mint);
}