@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
    /* Editorial Nutrition Palette */
    --color-canvas: #FAF8F5;
    --color-surface: #FFFFFF;
    --color-surface-soft: #F4EFEB;
    --color-surface-card: #FFFFFF;
    
    --color-forest: #1A3428;
    --color-forest-dark: #12241C;
    --color-forest-soft: #274838;
    
    --color-primary: #1A3428;
    --color-primary-rgb: 26 52 40;
    --color-primary-dark: #12241C;
    
    --color-terracotta: #C35E34;
    --color-terracotta-hover: #A74C25;
    --color-terracotta-soft: #F9EBE5;
    
    --color-ochre: #D28C38;
    --color-ochre-soft: #FBF4E8;
    
    --color-sage: #4E7C59;
    --color-sage-soft: #EDF4EE;
    
    --color-text-main: #1C2B22;
    --color-text-muted: #53675C;
    --color-text-light: #7E9085;
    
    --color-border: #E8E2D7;
    --color-border-card: #DFD7C9;
    --color-border-dark: #2A4839;
    
    --font-heading: 'Fraunces', Georgia, serif;
    --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --border-radius-sm: 8px;
    --border-radius: 14px;
    --border-radius-lg: 20px;
    --card-radius: 16px;
    
    --shadow-sm: 0 2px 6px rgba(26, 52, 40, 0.04);
    --shadow-md: 0 8px 24px -4px rgba(26, 52, 40, 0.08);
    --shadow-lg: 0 16px 36px -6px rgba(26, 52, 40, 0.12);
}

html {
    scroll-behavior: smooth;
    background-color: var(--color-canvas);
    color: var(--color-text-main);
}

body {
    font-family: var(--font-main) !important;
    background-color: var(--color-canvas);
    color: var(--color-text-main);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: var(--font-heading) !important;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    letter-spacing: -0.015em;
}

/* Typography polish */
.editorial-display {
    font-family: var(--font-heading) !important;
    font-optical-sizing: auto;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.editorial-italic {
    font-family: var(--font-heading) !important;
    font-style: italic;
    font-weight: 400;
}

/* Accent Badges & Chips */
.editorial-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    border-radius: 9999px;
    background-color: var(--color-terracotta-soft);
    color: var(--color-terracotta);
    border: 1px solid rgba(195, 94, 52, 0.2);
}

.editorial-badge-sage {
    background-color: var(--color-sage-soft);
    color: var(--color-sage);
    border-color: rgba(78, 124, 89, 0.25);
}

.editorial-badge-ochre {
    background-color: var(--color-ochre-soft);
    color: #9C5F18;
    border-color: rgba(210, 140, 56, 0.25);
}

/* Buttons */
.btn-terracotta {
    background-color: var(--color-terracotta);
    color: #FFFFFF !important;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(195, 94, 52, 0.25);
}
.btn-terracotta:hover {
    background-color: var(--color-terracotta-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(195, 94, 52, 0.35);
}

.btn-forest {
    background-color: var(--color-forest);
    color: #FFFFFF !important;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(26, 52, 40, 0.2);
}
.btn-forest:hover {
    background-color: var(--color-forest-soft);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(26, 52, 40, 0.3);
}

.btn-outline-editorial {
    background-color: transparent;
    color: var(--color-forest) !important;
    border: 1.5px solid var(--color-forest);
    font-weight: 600;
    transition: all 0.25s ease;
}
.btn-outline-editorial:hover {
    background-color: var(--color-forest);
    color: #FFFFFF !important;
}

/* Clean Cards */
.editorial-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.editorial-card:hover {
    border-color: var(--color-border-card);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Checklist interactive widget */
.checklist-item {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.checklist-item.checked {
    background-color: #F1F6F2 !important;
    border-color: #3E6B48 !important;
}
.checklist-item.checked .checkbox-box {
    background-color: #3E6B48 !important;
    border-color: #3E6B48 !important;
    color: #FFFFFF;
}

/* Table of contents styling */
.toc-link {
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}
.toc-link:hover, .toc-link.active {
    border-left-color: var(--color-terracotta);
    color: var(--color-terracotta);
    font-weight: 600;
    padding-left: 0.75rem;
}

/* Recipe Category Pills */
.filter-btn {
    transition: all 0.25s ease;
}
.filter-btn.active {
    background-color: var(--color-forest) !important;
    color: #FFFFFF !important;
    border-color: var(--color-forest) !important;
}

/* Hairline dividers */
.editorial-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

/* Subtle image frames */
.editorial-img-frame {
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

/* Header style polish */
.site-header {
    background: rgba(250, 248, 245, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

/* Footer polish */
.site-footer {
    background-color: var(--color-forest-dark);
    color: #F5F2EB;
}

/* Cookie banner polish */
#cookie-banner-914b {
    background: #172820 !important;
    border-top: 1px solid #2B4536 !important;
}