/* ── EL FOGON WHITE-LABEL DESIGN SYSTEM ── */

/* 1. Base Variables (Modern Theme - Default) */
:root {
    /* Brand Config (Can be overridden via inline PHP) */
    --ef-brand-color: #ea580c;
    
    /* Semantic Colors */
    --color-primary: var(--ef-brand-color);
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 80%, black);
    --color-primary-light: color-mix(in srgb, var(--color-primary) 10%, white);
    
    --color-surface: #ffffff;
    --color-surface-hover: #f9fafb;
    --color-bg-app: #f3f4f6;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    
    --color-danger: #ef4444;
    --color-danger-bg: #fee2e2;
    --color-success: #10b981;
    --color-success-bg: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-bg: #fef3c7;
    
    /* Fluid Typography (WCAG 2.2 Compliant) */
    --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.875rem, 0.8rem + 0.38vw, 1rem);
    --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-xl: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Component Specific Overrides */
    --btn-padding-y: 0.5rem;
    --btn-padding-x: 1rem;

    /* ── FDS Fase 4 Bridge — Extended Primary Palette ─────────── */
    --color-primary-bg:       color-mix(in srgb, var(--color-primary) 10%, white);
    --color-primary-border:   color-mix(in srgb, var(--color-primary) 28%, white);
    --color-primary-dark:     color-mix(in srgb, var(--color-primary) 85%, black);
    --color-primary-gradient: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));

    /* ── Secondary / Gold palette ────────────────────────────── */
    --color-secondary:        #C8963E;
    --color-secondary-bg:     #FDF8F0;
    --color-secondary-border: #EDD9A8;
    --color-secondary-dark:   #A07020;

    /* ── Semantic status aliases (short form) ────────────────── */
    --success:    var(--color-success);
    --success-bg: var(--color-success-bg);
    --error:      var(--color-danger);
    --error-bg:   var(--color-danger-bg);
    --warning:    var(--color-warning);
    --warning-bg: var(--color-warning-bg);
    --info:       #0284c7;
    --info-bg:    #e0f2fe;

    /* ── Text scale extensions ───────────────────────────────── */
    --text-primary:   #111827;
    --text-secondary: #57534E;
    --text-muted:     var(--color-text-muted);
    --text-inverse:   #ffffff;
    --color-text-main: var(--color-text);

    /* ── Surface / background extensions ────────────────────── */
    --color-surface-alt:   #F5F5F4;
    --color-bg-sidebar:    #1C1917;
    --border-color:        var(--color-border);
    --border-light:        #F3F4F6;

    /* ── Radius extensions ────────────────────────────────────── */
    --radius-xs: 3px;
    --radius-xl: 16px;
    --radius:    var(--radius-md);

    /* ── Shadow extensions ────────────────────────────────────── */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-brand: 0 3px 12px color-mix(in srgb, var(--color-primary) 32%, transparent);

    /* ── Animation tokens ────────────────────────────────────── */
    --duration:      200ms;
    --duration-slow: 360ms;
    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Sidebar geometry & text ─────────────────────────────── */
    --sidebar-w:           220px;
    --sidebar-w-collapsed: 52px;
    --sidebar-text:        rgba(231, 229, 228, 0.72);
    --sidebar-text-hover:  #E7E5E4;
    --sidebar-active-text: #ffffff;
    --sidebar-group-text:  #78716C;
    --sidebar-divider:     rgba(255, 255, 255, 0.06);

    /* ── Layout helpers ──────────────────────────────────────── */
    --rp-section-gap: 1.25rem;
}

/* ── FDS Fase 4: Module Identity Layer (per-module accent override) ─── */
/* Default: Borgonha / primary brand */
.wrap.rp,
.elfogon-wrapper {
    --mod-accent:        var(--color-primary);
    --mod-accent-dark:   var(--color-primary-dark);
    --mod-accent-border: var(--color-primary-border);
    --mod-light:         var(--color-primary-bg);
}

/* Inventario — Espresso warm brown */
[data-module="inventory"],
.wrap.rp[data-module="inventory"] {
    --mod-accent:        #92400E;
    --mod-accent-dark:   #78350F;
    --mod-accent-border: #D97706;
    --mod-light:         #FEF3C7;
}

/* Menú — Borgonha */
[data-module="menu"],
.wrap.rp[data-module="menu"] {
    --mod-accent:        #9B1C1C;
    --mod-accent-dark:   #771D1D;
    --mod-accent-border: #C81E1E;
    --mod-light:         #FDE8E8;
}

/* Pedidos — Forest green */
[data-module="orders"],
.wrap.rp[data-module="orders"] {
    --mod-accent:        #065F46;
    --mod-accent-dark:   #064E3B;
    --mod-accent-border: #059669;
    --mod-light:         #D1FAE5;
}

/* Cumplimiento — Slate blue */
[data-module="compliance"],
.wrap.rp[data-module="compliance"] {
    --mod-accent:        #1E3A5F;
    --mod-accent-dark:   #1E3A5F;
    --mod-accent-border: #2563EB;
    --mod-light:         #DBEAFE;
}

/* Reportes — Gold */
[data-module="reporting"],
.wrap.rp[data-module="reporting"] {
    --mod-accent:        #92400E;
    --mod-accent-dark:   #78350F;
    --mod-accent-border: #D97706;
    --mod-light:         #FEF3C7;
}

/* 2. Classic Theme (Corporate, dense, flat) */
[data-theme="classic"] {
    --color-surface: #ffffff;
    --color-bg-app: #ffffff;
    --color-border: #d1d5db;
    --radius-sm: 0px;
    --radius-md: 2px;
    --radius-lg: 4px;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --btn-padding-y: 0.25rem;
    --btn-padding-x: 0.75rem;
}

/* 3. Dark Theme (Night mode, POS environments) */
[data-theme="dark"] {
    --color-surface: #1f2937;
    --color-surface-hover: #374151;
    --color-bg-app: #111827;
    --color-text: #f9fafb;
    --color-text-muted: #9ca3af;
    --color-border: #374151;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --color-primary-light: color-mix(in srgb, var(--color-primary) 20%, #111827);
    --color-danger-bg: rgba(239, 68, 68, 0.2);
    --color-success-bg: rgba(16, 185, 129, 0.2);
    --color-warning-bg: rgba(245, 158, 11, 0.2);
}

/* 4. Bold Theme (Retail, Touch-friendly, rounded) */
[data-theme="bold"] {
    --color-surface: #ffffff;
    --color-bg-app: #e2e8f0;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-md: 0 10px 25px -5px rgb(0 0 0 / 0.1);
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.5rem;
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
}

/* Base Body Application */
body.elfogon-app, .elfogon-wrapper {
    background-color: var(--color-bg-app);
    color: var(--color-text);
    font-size: var(--text-base);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}