/* BisWeb design tokens (portiert aus src/styles.css) */
:root {
    --radius: 0.85rem;
    --background: oklch(0.985 0.012 90);
    --foreground: oklch(0.22 0.02 155);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.22 0.02 155);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.22 0.02 155);
    --primary: oklch(0.5 0.13 155);
    --primary-foreground: oklch(0.99 0.005 90);
    --secondary: oklch(0.94 0.02 90);
    --secondary-foreground: oklch(0.22 0.02 155);
    --muted: oklch(0.95 0.015 90);
    --muted-foreground: oklch(0.5 0.02 155);
    --accent: oklch(0.9 0.05 90);
    --accent-foreground: oklch(0.22 0.02 155);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.98 0.003 247);
    --border: oklch(0.22 0.02 155 / 0.12);
    --input: oklch(0.22 0.02 155 / 0.15);
    --ring: oklch(0.5 0.13 155);
    --brand: oklch(0.5 0.13 155);
    --brand-foreground: oklch(0.99 0.005 90);
    --sand: oklch(0.94 0.025 82);
}

* { border-color: var(--border); }

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3 {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 50, "WONK" 0;
    letter-spacing: -0.015em;
}

/* Reveal-Animation aus dem React-Projekt */
@keyframes reveal-down {
    from { clip-path: inset(0 0 100% 0); transform: translateY(10px); }
    to   { clip-path: inset(0 0 0% 0);   transform: translateY(0); }
}
.animate-reveal {
    animation: reveal-down 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Utility-Farb-Helper, weil Tailwind CDN keine dyn. bg-primary/10 rendert */
.bg-primary\/5   { background-color: color-mix(in oklab, var(--primary) 5%, transparent); }
.bg-primary\/10  { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.border-primary\/30 { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.border-primary\/40 { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.border-primary\/50 { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.bg-muted\/40 { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.bg-sand\/40 { background-color: color-mix(in oklab, var(--sand) 40%, transparent); }
.bg-sand\/50 { background-color: color-mix(in oklab, var(--sand) 50%, transparent); }
.bg-sand\/60 { background-color: color-mix(in oklab, var(--sand) 60%, transparent); }
.bg-background\/85 { background-color: color-mix(in oklab, var(--background) 85%, transparent); }
.text-background\/70 { color: color-mix(in oklab, var(--background) 70%, transparent); }
.text-background\/75 { color: color-mix(in oklab, var(--background) 75%, transparent); }
.border-white\/25 { border-color: color-mix(in oklab, #fff 25%, transparent); }
.bg-destructive\/5 { background-color: color-mix(in oklab, var(--destructive) 5%, transparent); }
.border-destructive\/30 { border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }

/* Chat-Widget Slide-in */
.chat-panel { transform: translateY(20px) scale(0.98); opacity: 0; pointer-events: none;
    transition: transform 200ms ease, opacity 200ms ease; }
.chat-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

/* ===== Cart alerts under the navbar ===== */
.alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background-color: var(--card);
    color: var(--foreground);
    animation: cart-alert-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.alert:where(.alert-success) {
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    border-color: color-mix(in oklab, var(--primary) 25%, transparent);
    color: color-mix(in oklab, var(--primary) 45%, #000);
}
.alert:where(.alert-danger) {
    background-color: var(--sand);
    border-color: color-mix(in oklab, var(--foreground) 12%, transparent);
    color: var(--foreground);
}
.alert a {
    font-weight: 600;
    text-decoration: none;
    color: currentColor;
    border-bottom: 1px solid currentColor;
}
.alert a:hover {
    opacity: 0.8;
}