/* ==========================================================================
   Frasqmanager v2 — Design tokens
   Paleta extraída del logo de El Frasquerío:
     negro #0C0C0C · amarillo #F8E868 · terracota #C85838 · azul #4868C8
   ========================================================================== */

:root {
    /* ---- Colores de marca (tal cual el logo) ---- */
    --fq-black: #0C0C0C;
    --fq-yellow: #F8E868;
    --fq-terracotta: #C85838;
    --fq-blue: #4868C8;

    /* ---- Amarillo: escala ----
       Nunca usar como texto sobre fondo claro (contraste 1.25:1).
       Sirve como relleno, acento y estado activo sobre fondo oscuro. */
    --fq-yellow-100: #FEFAE4;
    --fq-yellow-200: #FCF2B8;
    --fq-yellow-400: #F8E868;
    --fq-yellow-600: #D9C33A;
    --fq-yellow-800: #7A6B12;

    /* ---- Terracota: escala. El 700 es el color de acción (5.65:1) ---- */
    --fq-terra-50:  #FBEDE9;
    --fq-terra-100: #F5D5CB;
    --fq-terra-300: #E08D74;
    --fq-terra-500: #C85838;
    --fq-terra-700: #A84A32;
    --fq-terra-800: #8F3E2A;
    --fq-terra-900: #5E2819;

    /* ---- Azul: escala. El 600 es enlaces (5.07:1) ---- */
    --fq-blue-50:  #EDF1FB;
    --fq-blue-100: #D2DCF5;
    --fq-blue-400: #7189DA;
    --fq-blue-600: #4868C8;
    --fq-blue-800: #2C4189;

    /* ---- Neutros cálidos (afinados con el negro de marca) ---- */
    --fq-gray-0:   #FFFFFF;
    --fq-gray-25:  #FCFBF9;
    --fq-gray-50:  #F7F5F2;
    --fq-gray-100: #EFEDE8;
    --fq-gray-200: #E2DFD8;
    --fq-gray-300: #CBC7BE;
    --fq-gray-400: #A6A199;
    --fq-gray-500: #7D7871;
    --fq-gray-600: #5C5852;
    --fq-gray-700: #413E3A;
    --fq-gray-800: #26241F;
    --fq-gray-900: #141312;
    --fq-gray-950: #0C0C0C;

    /* ---- Semánticos: separados de la marca a propósito ----
       La terracota es "acción", no "peligro". */
    --fq-success:      #1D8A5F;
    --fq-success-soft: #E4F3EC;
    --fq-warning:      #B3730C;
    --fq-warning-soft: #FBF0DC;
    --fq-danger:       #C0392B;
    --fq-danger-soft:  #FBEAE8;
    --fq-info:         #2C6FA8;
    --fq-info-soft:    #E7F0F8;

    /* ---- Roles ---- */
    --fq-primary:       var(--fq-terra-700);
    --fq-primary-hover: var(--fq-terra-800);
    --fq-primary-soft:  var(--fq-terra-50);
    --fq-accent:        var(--fq-yellow-400);
    --fq-link:          var(--fq-blue-600);

    /* ---- Superficies ---- */
    --fq-bg:            var(--fq-gray-50);
    --fq-surface:       var(--fq-gray-0);
    --fq-surface-sunken: var(--fq-gray-25);
    --fq-sidebar:       #121211;
    --fq-sidebar-hover: #1F1E1C;
    --fq-topbar:        var(--fq-gray-0);

    /* ---- Texto ---- */
    --fq-text:        var(--fq-gray-900);
    --fq-text-muted:  var(--fq-gray-600);
    --fq-text-subtle: var(--fq-gray-500);
    --fq-text-invert: #FAF8F4;

    /* ---- Bordes ---- */
    --fq-border:        var(--fq-gray-200);
    --fq-border-strong: var(--fq-gray-300);

    /* ---- Tipografía ---- */
    --fq-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fq-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --fq-text-xs:   0.75rem;
    --fq-text-sm:   0.8125rem;
    --fq-text-base: 0.875rem;
    --fq-text-md:   0.9375rem;
    --fq-text-lg:   1.0625rem;
    --fq-text-xl:   1.25rem;
    --fq-text-2xl:  1.5rem;
    --fq-text-3xl:  1.875rem;

    /* ---- Espaciado ---- */
    --fq-space-1: 0.25rem;
    --fq-space-2: 0.5rem;
    --fq-space-3: 0.75rem;
    --fq-space-4: 1rem;
    --fq-space-5: 1.25rem;
    --fq-space-6: 1.5rem;
    --fq-space-8: 2rem;
    --fq-space-10: 2.5rem;

    /* ---- Radios ---- */
    --fq-radius-sm: 6px;
    --fq-radius:    8px;
    --fq-radius-md: 10px;
    --fq-radius-lg: 14px;
    --fq-radius-pill: 999px;

    /* ---- Sombras: suaves y cálidas, no grises ---- */
    --fq-shadow-xs: 0 1px 2px rgba(20, 19, 18, 0.05);
    --fq-shadow-sm: 0 1px 3px rgba(20, 19, 18, 0.07), 0 1px 2px rgba(20, 19, 18, 0.04);
    --fq-shadow:    0 2px 8px rgba(20, 19, 18, 0.07), 0 1px 3px rgba(20, 19, 18, 0.05);
    --fq-shadow-lg: 0 8px 24px rgba(20, 19, 18, 0.10), 0 2px 6px rgba(20, 19, 18, 0.05);

    /* ---- Layout ---- */
    --fq-sidebar-w: 248px;
    --fq-sidebar-w-collapsed: 68px;
    --fq-topbar-h: 60px;

    --fq-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Canales de venta ----
       Fuente real: columna `color` de la tabla canales_venta.
       Estos son el respaldo cuando el canal no tiene color asignado. */
    --fq-canal-mercadolibre: #FFE600;
    --fq-canal-whatsapp:     #25D366;
    --fq-canal-rappi:        #FF441F;
    --fq-canal-falabella:    #78BE20;
    --fq-canal-sitioweb:     #C85838;
    --fq-canal-otro:         #7D7871;
}

/* ==========================================================================
   Puente con Bootstrap 5.3
   Se reasignan las variables del framework para que los componentes que no
   personalizamos hereden igual la identidad.
   ========================================================================== */

:root {
    --bs-body-font-family: var(--fq-font);
    --bs-body-font-size: var(--fq-text-base);
    --bs-body-color: var(--fq-text);
    --bs-body-bg: var(--fq-bg);
    --bs-border-color: var(--fq-border);
    --bs-border-radius: var(--fq-radius);
    --bs-border-radius-sm: var(--fq-radius-sm);
    --bs-border-radius-lg: var(--fq-radius-md);
    --bs-primary: var(--fq-primary);
    --bs-primary-rgb: 168, 74, 50;
    --bs-link-color: var(--fq-link);
    --bs-link-hover-color: var(--fq-blue-800);
    --bs-secondary-color: var(--fq-text-muted);
    --bs-emphasis-color: var(--fq-text);
    --bs-heading-color: var(--fq-text);
}