@import 'tailwindcss';
@import 'tw-animate-css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@custom-variant dark (&:is(.dark *));

@theme inline {
    --font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --radius: 0.625rem;
    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-xl: calc(var(--radius) + 4px);

    --color-border: hsl(var(--border));
    --color-input: hsl(var(--input));
    --color-ring: hsl(var(--ring));
    --color-background: hsl(var(--background));
    --color-foreground: hsl(var(--foreground));
    
    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));
    
    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
    
    --color-destructive: hsl(var(--destructive));
    --color-destructive-foreground: hsl(var(--destructive-foreground));
    
    --color-muted: hsl(var(--muted));
    --color-muted-foreground: hsl(var(--muted-foreground));
    
    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));
    
    --color-popover: hsl(var(--popover));
    --color-popover-foreground: hsl(var(--popover-foreground));
    
    --color-card: hsl(var(--card));
    --color-card-foreground: hsl(var(--card-foreground));

    /* Restaurant-specific colors */
    --color-restaurant-50: #fef7ed;
    --color-restaurant-100: #fdedd3;
    --color-restaurant-200: #fbd7a5;
    --color-restaurant-300: #f8bc6d;
    --color-restaurant-400: #f59532;
    --color-restaurant-500: #f2760a;
    --color-restaurant-600: #e35d05;
    --color-restaurant-700: #bc4508;
    --color-restaurant-800: #95370e;
    --color-restaurant-900: #792f0f;
    --color-restaurant-950: #411505;

    --color-gold-50: #fffbeb;
    --color-gold-100: #fef3c7;
    --color-gold-200: #fde68a;
    --color-gold-300: #fcd34d;
    --color-gold-400: #fbbf24;
    --color-gold-500: #f59e0b;
    --color-gold-600: #d97706;
    --color-gold-700: #b45309;
    --color-gold-800: #92400e;
    --color-gold-900: #78350f;
    --color-gold-950: #451a03;
}


/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-border);
    }
}

@layer utilities {
    body,
    html {
        --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    }
}

:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 14.5%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 14.5%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 14.5%;
    --primary: 0 0% 20.5%;
    --primary-foreground: 0 0% 98.5%;
    --secondary: 0 0% 97%;
    --secondary-foreground: 0 0% 20.5%;
    --muted: 0 0% 97%;
    --muted-foreground: 0 0% 55.6%;
    --accent: 0 0% 97%;
    --accent-foreground: 0 0% 20.5%;
    --destructive: 27.325 24.5% 57.7%;
    --destructive-foreground: 25.331 23.7% 63.7%;
    --border: 0 0% 92.2%;
    --input: 0 0% 92.2%;
    --ring: 0 0% 70.8%;
    --radius: 0.625rem;
}

.dark {
    --background: 0 0% 14.5%;
    --foreground: 0 0% 98.5%;
    --card: 0 0% 14.5%;
    --card-foreground: 0 0% 98.5%;
    --popover: 0 0% 14.5%;
    --popover-foreground: 0 0% 98.5%;
    --primary: 0 0% 98.5%;
    --primary-foreground: 0 0% 20.5%;
    --secondary: 0 0% 26.9%;
    --secondary-foreground: 0 0% 98.5%;
    --muted: 0 0% 26.9%;
    --muted-foreground: 0 0% 70.8%;
    --accent: 0 0% 26.9%;
    --accent-foreground: 0 0% 98.5%;
    --destructive: 25.723 14.1% 39.6%;
    --destructive-foreground: 25.331 23.7% 63.7%;
    --border: 0 0% 26.9%;
    --input: 0 0% 26.9%;
    --ring: 0 0% 43.9%;
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground;
    }
}