/*
 * Mobile-first tweaks layered on top of Tailwind utilities.
 * These ensure comfortable touch targets, spacing, and typography.
 */

:root {
    --touch-min-size: 44px;
}

button,
[role="button"],
input,
select,
textarea,
a {
    min-height: var(--touch-min-size);
}

a {
    transition: color 0.2s ease;
}

a:focus-visible {
    outline: 2px solid rgba(var(--color-primary), 0.6);
    outline-offset: 2px;
}

@media (max-width: 639px) {
    body {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .container-responsive {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .table-responsive-touch {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 640px) {
    .card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}