:root {
--color-primary: #c2410c;
--color-primary-light: #ea580c;
--color-primary-dark: #9a3412;
--color-secondary: #65a30d;
--color-secondary-light: #84cc16;
--color-secondary-dark: #4d7c0f;
--color-accent: #ca8a04;
--color-accent-light: #eab308;
--color-accent-dark: #a16207;

--color-success: #16a34a;
--color-warning: #f59e0b;
--color-error: #b91c1c;
--color-info: #0284c7;

--bg-primary: #fffbf5;
--bg-secondary: #fef8ed;
--bg-tertiary: #fef3e2;
--bg-elevated: #ffffff;
--bg-overlay: rgba(124, 58, 237, 0.25);

--surface-primary: #fffffe;
--surface-secondary: #fefaf3;
--surface-hover: #fdf4e3;

--text-primary: #292524;
--text-secondary: #78716c;
--text-tertiary: #a8a29e;
--text-disabled: #d6d3d1;
--text-inverse: #fafaf9;

--border-light: #fef3e2;
--border-medium: #fed7aa;
--border-strong: #fdba74;
--border-focus: var(--color-primary);

--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-full: 9999px;

--space-xs: 0.75rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.25rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 5rem;

--shadow-xs: 0 1px 2px 0 rgba(41, 37, 36, 0.04);
--shadow-sm: 0 1px 4px 0 rgba(41, 37, 36, 0.06), 0 1px 2px -1px rgba(41, 37, 36, 0.04);
--shadow-md: 0 4px 8px -2px rgba(41, 37, 36, 0.08), 0 2px 4px -2px rgba(41, 37, 36, 0.06);
--shadow-lg: 0 10px 20px -4px rgba(41, 37, 36, 0.1), 0 4px 8px -4px rgba(41, 37, 36, 0.08);
--shadow-xl: 0 20px 40px -8px rgba(41, 37, 36, 0.12), 0 8px 16px -8px rgba(41, 37, 36, 0.1);
--shadow-inner: inset 0 2px 4px 0 rgba(41, 37, 36, 0.06);

--shadow-soft: 0 25px 50px -12px rgba(194, 65, 12, 0.15);
--shadow-glow: 0 0 60px rgba(194, 65, 12, 0.1);

--elevation-1: var(--shadow-sm);
--elevation-2: var(--shadow-md);
--elevation-3: var(--shadow-lg);
--elevation-4: var(--shadow-xl);

--transition-instant: all 0.1s linear;
--transition-fast: all 0.25s ease-in-out;
--transition-normal: all 0.45s ease-in-out;
--transition-slow: all 0.7s ease-in-out;
--transition-sluggish: all 1s ease-in-out;

--font-sans: 'Source Sans Pro', 'Open Sans', system-ui, sans-serif;
--font-mono: 'Source Code Pro', 'Courier Prime', monospace;
--font-display: 'Merriweather', 'Lora', Georgia, serif;
--font-handwriting: 'Caveat', 'Patrick Hand', cursive;

--font-size-xs: 0.625rem;
--font-size-sm: 0.75rem;
--font-size-base: 0.875rem;
--font-size-lg: 1rem;
--font-size-xl: 1.125rem;
--font-size-2xl: 1.375rem;
--font-size-3xl: 1.75rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--font-size-6xl: 4rem;

--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;

--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;

--z-deep: -10;
--z-default: 1;
--z-raised: 10;
--z-dropdown: 1000;
--z-sticky: 1100;
--z-fixed: 1200;
--z-overlay-backdrop: 1300;
--z-modal-backdrop: 1400;
--z-modal: 1500;
--z-popover: 1600;
--z-tooltip: 1700;
--z-notification: 1800;
--z-supreme: 9999;

--opacity-invisible: 0;
--opacity-barely: 0.05;
--opacity-faint: 0.15;
--opacity-subtle: 0.3;
--opacity-muted: 0.5;
--opacity-clear: 0.7;
--opacity-strong: 0.9;
--opacity-full: 1;

--blur-xs: 2px;
--blur-sm: 6px;
--blur-md: 12px;
--blur-lg: 20px;
--blur-xl: 32px;

--width-xs: 20rem;
--width-sm: 24rem;
--width-md: 28rem;
--width-lg: 32rem;
--width-xl: 36rem;
--width-2xl: 42rem;
--width-full: 100%;

--height-header: 4rem;
--height-footer: 3rem;
--height-input: 2.5rem;
--height-button: 2.25rem;
}

body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;

background-color: var(--bg-primary);
color: var(--text-primary);
transition: var(--transition-normal);
letter-spacing: 0.005em;
overflow-x: hidden;
}

body.dark {
--color-primary: #fb923c;
--color-primary-light: #fdba74;
--color-primary-dark: #f97316;
--color-secondary: #6ee7b7;
--color-secondary-light: #a7f3d0;
--color-secondary-dark: #34d399;
--color-accent: #fde047;
--color-accent-light: #fef08a;
--color-accent-dark: #facc15;

--color-success: #4ade80;
--color-warning: #fcd34d;
--color-error: #fca5a5;
--color-info: #7dd3fc;

--bg-primary: #1a1614;
--bg-secondary: #231f1d;
--bg-tertiary: #2c2825;
--bg-elevated: #34302d;
--bg-overlay: rgba(26, 22, 20, 0.88);

--surface-primary: #231f1d;
--surface-secondary: #2c2825;
--surface-hover: #38342f;

--text-primary: #fef3e2;
--text-secondary: #e7dccf;
--text-tertiary: #a8a29e;
--text-disabled: #57534e;
--text-inverse: #1c1917;

--border-light: #2c2825;
--border-medium: #44403c;
--border-strong: #78716c;
--border-focus: var(--color-primary);

--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
--shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.7), 0 1px 2px -1px rgba(0, 0, 0, 0.6);
--shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.75), 0 2px 4px -2px rgba(0, 0, 0, 0.7);
--shadow-lg: 0 10px 20px -4px rgba(0, 0, 0, 0.8), 0 4px 8px -4px rgba(0, 0, 0, 0.75);
--shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.85), 0 8px 16px -8px rgba(0, 0, 0, 0.8);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.5);

--shadow-soft: 0 25px 50px -12px rgba(251, 146, 60, 0.2);
--shadow-glow: 0 0 60px rgba(251, 146, 60, 0.15);

--glow-primary: 0 0 30px rgba(251, 146, 60, 0.4);
--glow-secondary: 0 0 30px rgba(110, 231, 183, 0.4);
--glow-accent: 0 0 30px rgba(253, 224, 71, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .footer iframe:hover,
    .footer > ul:first-of-type a:hover,
    .footer-a-Direccion:hover,
    .footer > a[href^="tel"]:hover,
    .footer-ul-horario li:hover,
    .Producto:hover,
    .hd-bn-modos:hover,
    .hd-bn-hamburguesa:hover,
    .main-section-Pri p:hover {
        transform: none;
    }

    .main-section-Pri::after {
        animation: none;
    }
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}