@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

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

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

    --color-zinc-50:  #faf6f3; /* surface */
    --color-zinc-100: #f5ede5; /* surface-page */
    --color-zinc-200: #eeeae5; /* surface-subtle */
    --color-zinc-300: #e5ded7; /* border */
    --color-zinc-400: #c8b8b0;
    --color-zinc-500: #89726c; /* text-muted */
    --color-zinc-600: #6b5a55; /* text-dim */
    --color-zinc-700: #5a4a45;
    --color-zinc-800: #4a3f3b; /* text-base */
    --color-zinc-900: #3a302c;
    --color-zinc-950: #2a2220;

    /* Brand accent — burnt sienna */
    --color-accent:            #bb5b3e;
    --color-accent-content:    #a34a31;
    --color-accent-foreground: #ffffff;

    /* Named semantic tokens */
    --color-primary:        #bb5b3e;
    --color-primary-dark:   #a34a31;
    --color-surface:        #faf6f3;
    --color-surface-page:   #f5ede5;
    --color-surface-subtle: #eeeae5;
    --color-border:         #e5ded7;
    --color-text-base:      #4a3f3b;
    --color-text-muted:     #89726c;
    --color-text-dim:       #6b5a55;

    /* Accent palette */
    --color-teal:  #4a7c7e;
    --color-mauve: #8b4860;
    --color-tan:   #9b8b6b;

    /* Status */
    --color-status-good: #22c55e;
    --color-status-warn: #f59e0b;
    --color-status-bad:  #ef4444;

    /* Display font */
    --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-neutral-800);
    }
}

@layer utilities {
    .hero-gradient {
        background:
                radial-gradient(circle at top right, color-mix(in oklch, var(--color-primary) 8%, transparent), transparent 50%),
                radial-gradient(circle at bottom left, color-mix(in oklch, var(--color-primary) 5%, transparent), transparent 40%);
    }

    .glass-card {
        background: color-mix(in oklch, var(--color-surface) 90%, transparent);
        backdrop-filter: blur(12px);
        border: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
    }
}

@layer base {

    :root {
        --primary:  #bb5b3e;
        --bg-main:  #f5ede5;
        --bg-card:  #faf6f3;
        --text-main: #4a3f3b;
        --neutral:  #89726c;
        --rec-now:  #8B4860;
        --rec-wait: #4A7C7E;
        --rec-hold: #9B8B6B;
    }

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-2;
}

[data-flux-label] {
    @apply  !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

/* \[:where(&)\]:size-4 {
    @apply size-4;
} */