@tailwind base;
@tailwind components;
@tailwind utilities;

/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap'); */

:root {
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
    --color-brand: #033250;
    --color-brand-dark: #03273d;
    --color-brand-light: #f4daa8;
    --color-bg: #fdfaf6;
    --color-surface: #ffffff;
    --color-border: #e7e5e4;
    --color-text: #1c1917;
    --color-text-muted: #78716c;
    --color-text-subtle: #a8a29e;
}

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}


/* Custom scrollbar */

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d6d3d1;
    border-radius: 2px;
}


/* Smooth scrolling */

html {
    scroll-behavior: smooth;
}


/* Touch optimization */

button,
a,
[role="button"] {
    cursor: pointer;
    touch-action: manipulation;
}


/* Category pill active state */

.category-pill {
    @apply px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 whitespace-nowrap;
}

.category-pill-active {
    @apply bg-brand-500 text-white shadow-brand;
}


/* .category-pill-inactive {
    @apply bg-white text-stone-600 border border-stone-200 hover: border-brand-300 hover: text-brand-600;
} */


/* Menu card */


/* .menu-card {
    @apply bg-white rounded-2xl overflow-hidden shadow-card hover: shadow-card-hover transition-all duration-300;
} */


/* Status badge */

.status-badge {
    @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold;
}

.status-pending {
    @apply bg-amber-50 text-amber-700 border border-amber-200;
}

.status-paid {
    @apply bg-blue-50 text-blue-700 border border-blue-200;
}

.status-preparing {
    @apply bg-orange-50 text-orange-700 border border-orange-200;
}

.status-served {
    @apply bg-green-50 text-green-700 border border-green-200;
}

.status-cancelled {
    @apply bg-red-50 text-red-700 border border-red-200;
}


/* Skeleton loading */

.skeleton {
    background: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 50%, #f5f5f4 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* Bottom safe area */

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 16px);
}


/* Hide scrollbar but keep functionality */

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

@layer utilities {
    .font-display {
        font-family: var(--font-display);
    }
    .font-body {
        font-family: var(--font-body);
    }
}