@import 'tailwindcss';
@plugin "daisyui";

/* Tailwind v4 theme tokens (two-color theme + highlight) */
@theme {
    --color-primary: hsl(var(--text-hsl));
    --color-secondary: hsl(var(--highlight-hsl));
    --color-accent: hsl(var(--text-hsl));
    --color-success: hsl(var(--text-hsl));
    --color-neutral: hsl(var(--text-hsl));
    --color-base-100: hsl(var(--bg-hsl));
    --color-base-200: hsl(var(--bg-2-hsl));
    --color-base-300: hsl(var(--bg-3-hsl));
    --color-base-content: hsl(var(--text-hsl));
}

[data-theme='italian'] {
    /* DaisyUI theme bridge */
    --p: hsl(var(--text-hsl));
    --pc: hsl(var(--inverse-hsl));
    --s: hsl(var(--highlight-hsl));
    --sc: hsl(var(--inverse-on-highlight-hsl));
    --a: hsl(var(--text-hsl));
    --ac: hsl(var(--inverse-hsl));
    --n: hsl(var(--text-hsl));
    --nc: hsl(var(--inverse-hsl));
    --b1: hsl(var(--bg-hsl));
    --b2: hsl(var(--bg-2-hsl));
    --b3: hsl(var(--bg-3-hsl));
    --bc: hsl(var(--text-hsl));

    /* Two key colors (RGB → HSL) */
    /* Background: rgb(255, 247, 222) → hsl(45.6 100% 93.53%) */
    --bg-hsl: 45.6 100% 93.53%;
    --bg-2-hsl: 45.6 100% 90%;
    --bg-3-hsl: 45.6 100% 85%;
    /* Text: rgb(123, 34, 30) → hsl(2.5 60.78% 30%) */
    --text-hsl: 2.5 60.78% 30%;
    --inverse-hsl: 0 0% 100%;
    /* Highlight: hsla(54.9, 89.47%, 33.53%, 1) */
    --highlight-hsl: 54.9 89.47% 33.53%;
    --inverse-on-highlight-hsl: 0 0% 0%;
}

/* Ensure our theme overrides daisyUI's default light tokens */
[data-theme='italian'] {
    /* Base surfaces */
    --color-base-100: hsl(var(--bg-hsl));
    --color-base-200: hsl(var(--bg-2-hsl));
    --color-base-300: hsl(var(--bg-3-hsl));
    --color-base-content: hsl(var(--text-hsl));

    /* Brand tokens */
    --color-primary: hsl(var(--text-hsl));
    --color-primary-content: hsl(var(--inverse-hsl));
    --color-secondary: hsl(var(--highlight-hsl));
    --color-secondary-content: hsl(var(--inverse-on-highlight-hsl));
    --color-accent: hsl(var(--text-hsl));
    --color-accent-content: hsl(var(--inverse-hsl));
    --color-neutral: hsl(var(--text-hsl));
    --color-neutral-content: hsl(var(--inverse-hsl));
}

/* Force page background/text to the theme values */
html[data-theme='italian'] {
    /* Color the browser/OS area behind the page (e.g., device clock) */
    background-color: hsl(var(--bg-hsl));
}

/* Global styles for Chef Bible */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better focus styles for accessibility */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}