/**
 * Meatlers Theme Integration Variables
 *
 * This file imports and maps Meatlers theme CSS variables for use in the
 * Hunter Processing Orders frontend form, ensuring visual consistency
 * with the Ruiz Custom Meats brand.
 *
 * @package HunterProcessingOrders
 * @version 1.0.0
 */

:root {
    /* ========================================
       PRIMARY BRAND COLORS (from Meatlers theme)
       ======================================== */

    /* Main brand red - use for primary actions, headings, emphasis */
    --hpo-primary: var(--primary, #B41F25);
    --hpo-primary-hover: #8E1820; /* Darker red for hover states */
    --hpo-primary-light: rgba(180, 31, 37, 0.1); /* Light tint for backgrounds */

    /* Text colors */
    --hpo-text: var(--text, #5C5C5C); /* Body text */
    --hpo-accent: var(--accent, #1B1B1B); /* Headings and strong text */

    /* Highlight/accent color - use for success states, active elements */
    --hpo-highlight: var(--highligh, #FF9E0C); /* Orange accent */

    /* Neutral colors */
    --hpo-border: var(--border, #EAE7E5); /* Borders, dividers */
    --hpo-background: var(--background, #FAF9F7); /* Light backgrounds */
    --hpo-white: var(--white, #FFFFFF); /* Pure white */

    /* ========================================
       TYPOGRAPHY (from Meatlers theme)
       ======================================== */

    --hpo-font-text: var(--e-global-typography-text-font-family, "Barlow Semi Condensed", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif);
    --hpo-font-heading: var(--e-global-typography-accent-font-family, "Mona Sans Condensed", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif);

    /* ========================================
       LAYOUT & SPACING (from Meatlers theme)
       ======================================== */

    --hpo-gutter: var(--gutter-width, 30px);
    --hpo-container: var(--container, 1320px);

    /* ========================================
       COMPONENT STYLING
       ======================================== */

    /* Border radius */
    --hpo-radius-sm: 6px;
    --hpo-radius: 8px;
    --hpo-radius-lg: 12px;

    /* Shadows */
    --hpo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --hpo-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(180, 31, 37, 0.1);
    --hpo-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --hpo-shadow-brand: 0 2px 8px rgba(180, 31, 37, 0.2);

    /* Transitions */
    --hpo-transition: all 0.3s ease;
    --hpo-transition-fast: all 0.2s ease;
    --hpo-transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       STATE COLORS
       ======================================== */

    /* Success - using brand orange instead of green */
    --hpo-success: var(--highligh, #FF9E0C);
    --hpo-success-bg: rgba(255, 158, 12, 0.1);
    --hpo-success-border: rgba(255, 158, 12, 0.3);

    /* Error */
    --hpo-error: #dc3232;
    --hpo-error-bg: #fff5f5;
    --hpo-error-border: #f5c6cb;

    /* Warning */
    --hpo-warning: #856404;
    --hpo-warning-bg: #fff3cd;
    --hpo-warning-border: #ffeaa7;

    /* Info */
    --hpo-info: #0c5460;
    --hpo-info-bg: #d1ecf1;
    --hpo-info-border: #bee5eb;

    /* ========================================
       ENHANCED DESIGN TOKENS
       ======================================== */

    /* Spacing scale for consistent rhythm */
    --hpo-space-xs: 8px;
    --hpo-space-sm: 12px;
    --hpo-space-md: 20px;
    --hpo-space-lg: 32px;
    --hpo-space-xl: 48px;

    /* Enhanced shadow system for depth */
    --hpo-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --hpo-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --hpo-shadow-card-active: 0 4px 12px rgba(180, 31, 37, 0.2), 0 2px 6px rgba(180, 31, 37, 0.1);

    /* Gradient definitions */
    --hpo-gradient-primary: linear-gradient(135deg, #B41F25 0%, #8E1820 100%);
    --hpo-gradient-highlight: linear-gradient(135deg, #FF9E0C 0%, #FF8500 100%);
    --hpo-gradient-subtle: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(180,31,37,0.03) 100%);

    /* Animation timing functions */
    --hpo-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --hpo-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}