:root {
    --color-brand: #0EA5A8;
    --color-brand-dark: #0F766E;
    --color-accent: #22D3EE;

    --color-neutral-50: #F8FAFC;
    --color-neutral-100: #F1F5F9;
    --color-neutral-200: #E2E8F0;
    --color-neutral-300: #CBD5E1;
    --color-neutral-400: #94A3B8;
    --color-neutral-500: #64748B;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1F2937;
    --color-neutral-900: #0F172A;
    --color-neutral-950: #020617;

    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-text-on-primary: #FFFFFF;

    --color-surface: #FFFFFF;
    --color-background: #F1F5F9;

    --color-border-subtle: #E2E8F0;
    --color-divider: #E2E8F0;

    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-error: #DC2626;
}

/* Utility mapping to use in Tailwind class names via @apply */
.bg-brand {
    background-color: var(--color-brand);
}

.bg-brand-dark {
    background-color: var(--color-brand-dark);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-neutral-50 {
    background-color: var(--color-neutral-50);
}

.bg-neutral-100 {
    background-color: var(--color-neutral-100);
}

.bg-surface {
    background-color: var(--color-surface);
}

.bg-neutral-bg {
    background-color: var(--color-background);
}

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

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

.text-text-primary {
    color: var(--color-text-primary);
}

.text-text-secondary {
    color: var(--color-text-secondary);
}

.text-text-on-primary {
    color: var(--color-text-on-primary);
}

.border-border-subtle {
    border-color: var(--color-border-subtle);
}

/* Header animation */
.header-anim {
    opacity: 0;
    transform: translateY(-10px);
    transition: all .28s cubic-bezier(.25, .46, .45, .94);
}

.header-anim.show {
    opacity: 1;
    transform: translateY(0);
}

/* Fade slide for PWA banner */
.slide-up {
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
}

.slide-up.show {
    opacity: 1;
    transform: translateY(0);
}