/* Brand colors for Tailwind CDN */
:root {
    --navy: #003577;
    --navy-dark: #002555;
    --green: #129256;
}

/* Extend Tailwind with brand colors */
.bg-navy { background-color: var(--navy); }
.bg-navy-dark { background-color: var(--navy-dark); }
.bg-green { background-color: var(--green); }
.text-navy { color: var(--navy); }
.text-green { color: var(--green); }
.border-navy { border-color: var(--navy); }
.border-green { border-color: var(--green); }
.hover\:bg-navy-dark:hover { background-color: var(--navy-dark); }
.hover\:border-navy:hover { border-color: var(--navy); }
.hover\:border-green:hover { border-color: var(--green); }
.hover\:text-navy:hover { color: var(--navy); }
.focus\:ring-navy:focus { --tw-ring-color: var(--navy); }

/* Tailwind opacity variants for brand colors */
.bg-navy\/10 { background-color: rgba(0, 53, 119, 0.1); }
.bg-green\/10 { background-color: rgba(18, 146, 86, 0.1); }

/* Smooth transitions on app icons */
.app-icon {
    text-decoration: none;
    transition: all 0.2s ease;
}
.app-icon:hover {
    transform: translateY(-2px);
}