mirror of
https://github.com/taogaetz/chefbible.git
synced 2025-12-06 11:47:24 -05:00
115 lines
3.2 KiB
CSS
115 lines
3.2 KiB
CSS
@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;
|
|
} |