/**
 * Zestly App Design System CSS
 *
 * Provides the design system variables (colors, spacing, typography)
 * to match the WordPress recipe pages with the main Zestly app look and feel.
 *
 * Scoped to .zestly-recipes-page and .zestly-single-recipe to avoid
 * conflicts with WordPress theme styles.
 *
 * NOTE: This file is intentionally minimal. It provides only CSS custom
 * properties and scoped base resets. All component styles live in frontend.css,
 * with high-specificity overrides at the end of that file to protect against
 * WordPress theme interference.
 */

/* ==========================================================================
   Design System Variables
   ========================================================================== */
:root {
    /* Zestly Brand Colors */
    --zestly-sunset: #ff7847;
    --zestly-glow: #ffd98a;

    /* Semantic Colors */
    --page-background: #fffbf5;
    --card-white: #fff;
    --light-gray: #f3f4f6;
    --medium-gray: #6b7280;
    --primary-text: #1f2937;
    --success-green: #6caf62;
    --danger-red: #ef4444;

    /* UI Token Colors */
    --background: #fffbf5;
    --foreground: #1f2937;
    --card: #fff;
    --card-foreground: #1f2937;
    --primary: #ff7847;
    --primary-foreground: #fff;
    --secondary: #ffd98a;
    --secondary-foreground: #1f2937;
    --muted: #f3f4f6;
    --muted-foreground: #6b7280;
    --accent: #f3f4f6;
    --accent-foreground: #1f2937;
    --destructive: #ef4444;
    --destructive-foreground: #fff;
    --border: #d1d5db;
    --input: #d1d5db;
    --ring: #ff7847;
    --radius: .625rem;
}

/* ==========================================================================
   Scoped Base Resets for Zestly Containers
   ========================================================================== */

/* Ensure proper box-sizing within Zestly containers */
.zestly-recipes-page *,
.zestly-recipes-page *::before,
.zestly-recipes-page *::after,
.zestly-single-recipe *,
.zestly-single-recipe *::before,
.zestly-single-recipe *::after {
    box-sizing: border-box;
}

/* Ensure images and media behave correctly */
.zestly-recipes-page img,
.zestly-recipes-page svg,
.zestly-recipes-page video,
.zestly-single-recipe img,
.zestly-single-recipe svg,
.zestly-single-recipe video {
    vertical-align: middle;
    display: block;
}

.zestly-recipes-page img,
.zestly-recipes-page video,
.zestly-single-recipe img,
.zestly-single-recipe video {
    max-width: 100%;
    height: auto;
}

/* Typography baseline for Zestly containers */
.zestly-recipes-page,
.zestly-single-recipe {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: #1f2937;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Pulse Animation for Stats Dots
   ========================================================================== */
@keyframes zestly-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}