/* ============================================
   HELADERÍA KAFIT — Design Tokens (CSS Variables)
   Centralizado para modificación desde admin
   ============================================ */

:root {
    /* ── Brand Colors ── */
    --kafit-primary: #4A3219;
    --kafit-primary-light: #6A4B2A;
    --kafit-primary-dark: #322110;
    --kafit-primary-rgb: 74, 50, 25;

    --kafit-secondary: #889260;
    --kafit-secondary-light: #A3AF77;
    --kafit-secondary-rgb: 136, 146, 96;

    --kafit-accent: #C39D6B;
    --kafit-accent-light: #D6B68D;
    --kafit-accent-dark: #A88251;
    --kafit-accent-rgb: 195, 157, 107;

    --kafit-mint: #889260;
    --kafit-mint-light: #A3AF77;
    --kafit-mint-dark: #6D764D;

    /* ── Neutral Colors ── */
    --kafit-cream: #FFF8F0;
    --kafit-cream-dark: #F5EDE3;
    --kafit-white: #FFFFFF;
    --kafit-gray-50: #FAFAFA;
    --kafit-gray-100: #F5F5F5;
    --kafit-gray-200: #EEEEEE;
    --kafit-gray-300: #E0E0E0;
    --kafit-gray-400: #BDBDBD;
    --kafit-gray-500: #9E9E9E;
    --kafit-gray-600: #757575;
    --kafit-gray-700: #616161;
    --kafit-gray-800: #424242;
    --kafit-gray-900: #212121;
    --kafit-dark: #2B1D0F;

    /* ── Status Colors ── */
    --kafit-success: #889260;
    --kafit-warning: #C39D6B;
    --kafit-error: #EF4444;
    --kafit-info: #3B82F6;

    /* ── Gradients ── */
    --kafit-gradient-primary: linear-gradient(135deg, #4A3219 0%, #889260 100%);
    --kafit-gradient-warm: linear-gradient(135deg, #4A3219 0%, #C39D6B 100%);
    --kafit-gradient-hero: linear-gradient(135deg, rgba(74,50,25,0.85) 0%, rgba(136,146,96,0.7) 100%);
    --kafit-gradient-card: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.03) 100%);
    --kafit-gradient-dark: linear-gradient(135deg, #2B1D0F 0%, #4A3219 100%);

    /* ── Typography ── */
    --font-display: 'Fredoka', 'Baloo 2', sans-serif;
    --font-body: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Fira Code', monospace;

    /* Font Sizes (fluid) */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --text-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --text-xl: clamp(1.15rem, 1rem + 0.4vw, 1.25rem);
    --text-2xl: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem);
    --text-3xl: clamp(1.6rem, 1.3rem + 1vw, 1.875rem);
    --text-4xl: clamp(1.9rem, 1.5rem + 1.5vw, 2.25rem);
    --text-5xl: clamp(2.2rem, 1.7rem + 2vw, 3rem);
    --text-6xl: clamp(2.8rem, 2rem + 3vw, 3.75rem);
    --text-hero: clamp(2.5rem, 2rem + 3.5vw, 4.5rem);

    /* ── Spacing ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Layout ── */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1440px;
    --header-height: 72px;
    --header-height-mobile: 60px;

    /* ── Border Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
    --shadow-glow: 0 0 20px rgba(232,70,124,0.3);
    --shadow-card: 0 2px 16px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.12);

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;
}