/* Base styles */
:root { --primary-color: #4caf50; --primary-color-dark: #1b5e20; --recipe-value: #75ff5a; --text-color: #e0e0e0; --bg-color: #121212; --page-bg-color: #0a0a0a; --error-color: #e57373; --accent-color: #644ae2; --accent-hover: color-mix(in srgb, #644ae2 85%, black); --secondary-color: #2a2a2a; --success-color: #51cf66; --warning-color: #ffd43b; --secondary-text-color: #b0b0b0; --button-bg: #333333; --hover-bg: rgba(76, 175, 80, 0.2); --border-color: #444444; --shadow-color: rgba(0, 0, 0, 0.4); --input-bg: #121212; --max-width: 8.5in; --border-radius: 4px; --border-radius-sm: 3px; --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --heading-font-family: "gluten-variable", sans-serif; --subheading-font-family: "grandstander-variable", sans-serif; --body-font-family: "ivysoft-variable", sans-serif; --base-font-size: 16px; --base-line-height: 1.3; --range-track-color-start: #343a40; --free-space-bg: rgba(250, 250, 250, 0.15); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "ivysoft-variable", sans-serif; max-width: 800px; margin: 0 auto; padding: 16px; background-color: #0a0a0a; color: #e0e0e0; line-height: 1.3; font-size: 16px; -webkit-font-smoothing: antialiased; }
main { padding-top: 60px; }
ul, ol { list-style: none; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: "gluten-variable", sans-serif; color: #e0e0e0; line-height: 1.1; margin-bottom: 0.5em; }
h1, h2 { font-family: "gluten-variable", sans-serif; }
h3, h4, h5, h6 { font-family: "grandstander-variable", sans-serif; }
h1 { font-size: 3.3em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }
h5 { font-size: 0.85em; }
h6 { font-size: 0.7em; }
p { line-height: 1.3; font-size: 0.8em; }
.text-small { font-size: 0.875rem; }
.text-medium { font-size: 1.1rem; }
.text-semibold { font-weight: 600; }
.text-center { text-align: center; }
a { color: #4caf50; text-decoration: none; }
a:hover { text-decoration: underline; color: #1b5e20; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page { display: block; }
.page:not(.active) { display: none; }
#recipe-page { display: none; }
#recipe-page.active { display: block; }
:focus { outline: 2px solid #4caf50; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }