/**
 * FQPedidos — Identidad visual oficial (Sprint UX-1)
 */

:root {
    /* Paleta oficial */
    --color-primary:       #16A34A;
    --color-primary-dark:  #15803D;
    --color-accent:        #F97316;
    --color-background:    #F7F8FA;
    --color-surface:       #FFFFFF;
    --color-text:          #111827;
    --color-text-muted:    #6B7280;
    --color-border:        #E5E7EB;

    /* Tokens derivados */
    --color-primary-light: #DCFCE7;
    --color-primary-soft:  #F0FDF4;
    --color-on-primary:    #FFFFFF;
    --color-button-dark:   #111827;
    --color-button-dark-hover: #1F2937;
    --color-danger:        #DC2626;
    --color-danger-soft:   #FEE2E2;
    --color-delete:        #A31010;
    --color-delete-hover:  #8B0D0D;
    --color-warning:       #EA580C;
    --color-text-light:    #9CA3AF;
    --color-border-light:  #F3F4F6;

    /* Alias internos (--fq-*) */
    --fq-primary:       var(--color-primary);
    --fq-primary-dark:  var(--color-primary-dark);
    --fq-primary-light: var(--color-primary-light);
    --fq-primary-soft:  var(--color-primary-soft);
    --fq-accent:        var(--color-accent);

    --fq-bg:            var(--color-background);
    --fq-surface:       var(--color-surface);
    --fq-text:          var(--color-text);
    --fq-text-muted:    var(--color-text-muted);
    --fq-text-light:    var(--color-text-light);
    --fq-border:        var(--color-border);
    --fq-border-light:  var(--color-border-light);

    --fq-success:       var(--color-primary);
    --fq-danger:        var(--color-danger);
    --fq-warning:       var(--color-warning);
    --fq-on-primary:    var(--color-on-primary);
    --fq-on-dark:       var(--color-on-primary);

    /* Forma */
    --fq-radius-sm:     6px;
    --fq-radius:        8px;
    --fq-radius-lg:     12px;

    /* Elevación — sin transparencias */
    --fq-shadow-sm:     0 1px 0 var(--color-border);
    --fq-shadow:        0 2px 0 var(--color-border-light);
    --fq-shadow-lg:     0 3px 0 var(--color-border);
    --fq-shadow-hover:  0 2px 0 var(--color-border);

    /* Tipografía */
    --fq-font:          'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Layout — Header / navegación sticky categorías comercio */
    --fq-max-width:         1440px;
    --fq-header-height:     64px;
    /* Desktop: una sola fila de cabecera (coincide con --fq-header-height). */
    --fq-categories-sticky-top: var(--fq-header-height);
    /* Altura aproximada de la barra de pills (padding + botón). */
    --fq-categories-bar-height: 3.25rem;
    --fq-header-bg:         var(--color-primary);
    --fq-header-text:       var(--color-on-primary);
    --fq-header-search-height: 50px;
    --fq-gap:               1rem;
    --fq-gap-lg:            1.25rem;
}